Giter Site home page Giter Site logo

swift-animatedvalidator-lab-sfo-web-012720's Introduction

Animated-Validator

Goal

There are 5 textfields simulating a user sign up page. Your goal is to

  • "validate" each field, meaning check for the appropriate input.
  • if the input is invalid, make the user aware with an eye-catching animation
  • once all fields are valid, enable the submit button.

Instructions

  1. The fields (listed below) have already been added to your Storyboard. The submit button will be disabled by default thanks to a line at the end of viewDidLoad().
  2. Validate your different fields using the criteria listed below. If someone "leaves" the field with an invalid value, make the field flash red and pulse (quickly grow bigger/smaller).
  • There are two ways to be notified when the user exits a text field: the UITextFieldDelegate method textFieldDidEndEditing(_:), or you can wire up an IBAction from the field and select the "Editing Did End" event. Think about which approach works best for you.
  1. As soon as all fields are valid, make the submit button animate in from the bottom.
    • To be notified when the text inside a textfield changes, wire up an action to the field's "Editing Changed" event (not "Value Changed", confusingly).
    • if you're a UITextFieldDelegate fan, there is only textField(_:shouldChangeCharactersIn:replacementString:). Be aware though, this method is more complicated than just "editing changed"!
  2. Set up AutoLayout so the form looks good on all phones in portrait. Don't worry about horizontal for now, that will be extra credit.

The Fields (all are required)

  1. Email * Should be a valid email (don't go nuts with this -- a check for an '@' and a period is probably enough)
  2. Email confirm * should be the same as the first email field
  3. Phone * at least 7 characters * only digits
  4. Password * at least 6 characters
  5. Password Confirm * should be the same as the first password field

Extra Credit

Notice how, when horizontal, our form is partially covered by the keyboard?

  1. Have the active text view move up when the keyboard is shown, if needed.
  • Hint: If you aren't familiar with NotificationCenter just yet, this may call for a Cocoapod!

View animated-validator on Learn.co and start learning to code for free.

swift-animatedvalidator-lab-sfo-web-012720's People

Contributors

susanlovaglio avatar jimcampagno avatar johannkerr avatar ipc103 avatar

Watchers

Mohawk Greene avatar Victoria Thevenot avatar Bernard Mordan avatar Otha avatar raza jafri avatar  avatar Joe Cardarelli avatar The Learn Team avatar  avatar  avatar Ben Oren avatar Matt avatar Antoin avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Ahmed avatar Nicole Kroese  avatar Dominique De León avatar  avatar Lisa Jiang avatar Vicki Aubin avatar Maxwell Benton avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.