Posts

Showing posts with the label form

form validator with Javascript

Image
Form validator is a basic function when building a website with sign-in and sign-up sites. Normally the backend will require the user's name ,email and password,meanwhile double type the email to verify the email is no typo error.  The form contains username,email,password and verifying password. HTML The container includes form which can submit. Four inputs with labels. And also link the css style and js script. snall is the section to show up the messager. CSS set up the label to block to show in one line. when input is being focused,change the brorder color and hidden the outline. hide the message first,when error happends,the message shows up.  and also the border color changes when the status of input changed. when focusing the button, the style changes.  JS select the DOMs first ,with getElementById() or querySelector() When the form submits, it's time to validate all the functions. first prevent the submition before all the events async. when error happends,showErr...

Form Validation with Javascript

Image
  Features: form validation with html validation format phone number and email address with Reg expression passwords should be match with Javascript function to go through register processing show up the message below according to the filling content CODE Github DEMO HTML all the inputs are required. If empty,register won't pass. the pattern of phone is a reg expression with 10 number format. the password pattern is from RegExr the message display box changing with Javascript.default is "here" CSS center the form container input has two kinds of pseudo condition.And will be used when using form.checkValidity() the event will return false if not valid. button hovering styles and message centered. JAVASCRIPT select DOM When click submit,processFormData() Then check the validate and store the data if validate Set the isValidate is false because when first in the page nothing filled. check the validate of form with checkValidility() if not validate, give a error message and s...