How To Add Form Validation In Html?

I have a form:

Solution 1:

Although you can do the validations with HTML5 itself, I generally use jQuery Validate Plugin.

You need jQuery and then include the jQuery Validate Plugin libraries.

Your validate like this. I have validated only for name field. You can take it forward for other fields.

var self = this;
$(document).ready(function() {
  
  
  // Right way, as suggested by @Sparky in the comments below, is to have attache validation code to the form only once.
  $("#myForm").validate({
    rules: {

      'name': { // this is value of the name attribute of your fieldrequired: true,
      },

      'email': {
        required: true,
        // regex: 'regex for email field goes here'
      }
    },
    messages: {
      'name': {
        required: "Name is required"
      },

      'email': {
        required: "Email is required",
        //regex: 'Error response for regex fail goes here'
      }
    }

  });
  $(".submit").click(function() {

    
    // Do a check each time before submitif (!$("#myForm").valid())
      alert("Form has validation errors. Cannot submit!!");
    else {
      alert("Form can be submitted!!");
      // do jQuery form submit here
    }
  });

});

.error {
  color: red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script><formmethod="post"id="myForm"><inputtype="text"name="name"placeholder="Name :"data-required="true"data-type="Name"><inputtype="text"name="email"placeholder="Email:"data-required="true"data-type="Email"><inputtype="text"name="phone"placeholder="Phone Number:"data-required="true"data-type="Phone"><select><optionvalue=""disabledselected>College Name:</option><option>College 1</option><option>College 2</option><option>College 3</option><option>College 4</option><option>College 5</option><option>College 6</option></select><select><optionvalue=""disabledselected>Enquiry Type:</option><option>MD/MS Coaching</option><option>MDS Coaching</option><option>DNB Coaching</option></select><textarea>Message</textarea><buttonclass="btn btn-info submit">Submit</button></form>

Solution 2:

If you only want the textboxes not to allow empty fields then you can add the "required" keyword.

<form action="demo_form.asp" method="post">
  <inputtype="text" name="fname" required>
  <inputtype="submit" value="Submit">
</form>

For more HTML5 Form Validation Examples I recommend:

http://www.w3schools.com/js/js_validation.asp

and

http://www.the-art-of-web.com/html/html5-form-validation/

/ChrisRun

Solution 3:

You can validate form field using html5. Please see following example to validate form-

<formmethod="post"><inputtype="text"name="name"placeholder="Name :"data-required="true"required><inputtype="email"name="email"placeholder="Email:"data-required="true"required><inputtype="tel"pattern="[0-9]{10,10}"name="phone"placeholder="Phone Number:"data-required="true"required><selectrequired><optionvalue=""disabledselected>College Name:</option><option>College 1</option><option>College 2</option><option>College 3</option><option>College 4</option><option>College 5</option><option>College 6</option></select><selectrequired><optionvalue=""disabledselected>Enquiry Type:</option><option>MD/MS Coaching</option><option>MDS Coaching</option><option>DNB Coaching</option></select><textarearequired>Message</textarea><inputtype="submit"value="Submit"></form>

Share