validating a form using jQuery

Question

I've tried, I've researched, and I still can't figure out how to validate this form using jQuery. I've even tried to check out the jQuery API and I had no luck with it. This shouldn't be as hard as it seems. There are a few id's that i'm not using yet because I want to get what I have so far working before I continue. The best I could find for validating emails is just straight up JavaScript. Here's my code.

 $(document).ready(function(){ $("#sendForm").click(function(){ var validForm=true; //set valid flag to true, assume form is valid //validate customer name field. Field is required if($("#custName").val()) { $("#custNameError").html(""); //field value is good, remove any error messages } else { $("#custNameError").html("Please enter your name."); validForm = false; } //validate customer phone number. Field is required, must be numeric, must be 10 characters var inPhone = $("#custPhone").val(); //get the input value of the Phone field $("#custPhoneError").html(""); //set error message back to empty, assume field is valid if(!inPhone) { $("#custPhoneError").html("Please enter your phone number."); validForm = false; } else { //if( !$.isNumeric(inPhone) || Math.round(inPhone) != inPhone ) //if the value is NOT numerice OR not an integer. Rounding technique if( !$.isNumeric(inPhone) || (inPhone % 1 != 0) ) //if the value is NOT numerice OR not an integer. Modulus technique { $("#custPhoneError").html("Phone number must be a number."); validForm = false; } else { if(inPhone.length != 10) { $("#custPhoneError").html("Phone number must have 10 numbers"); validForm = false; } } } //ALL VALIDATIONS ARE COMPLETE. If all of the fields are valid we can submit the form. Otherwise display the errors if(validForm) { //all values are valid, form is good, submit the form alert("Valid form will be submitted"); //$("#applicationForm").submit(); //SUBMIT the form to the server } else { //form has at least one invalid field //display form and associated error messages alert("Invalid form. Display form and error messages"); } }); //end sendform.click }); //end .ready function isEmail(email) { var regex = /^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); } 

 label { width:150px; display:inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2></h2> <h3>Form Validation Project - Complaint Form</h3> <form id="form1" name="form1" method="post" action=""> <p>Please enter the following information in order to process your concerns.</p> <p> <label for="custName">Name:</label> <input type="text" name="custName" id="custName" /> <span id="custNameError" class="errorMsg"></span> </p> <p> <label for="custPhone">Phone Number: </label> <input type="text" name="custPhone" id="custPhone" /> <span id="custPhoneError" class="errorMsg"></span> </p> <p> <label for = "email">Email:</label> <input type = "text" name = "emailAdd" id = "emailAdd" /> <span id = "emailError" class = "emailError"></span> </p> <p>Please Select Product Group:</p> <p> <label> <input type="radio" name="custProducts" value="books" id="custProducts_0" /> Books </label> <br /> <label> <input type="radio" name="custProducts" value="movies" id="custProducts_1" /> Movies </label> <br /> <label> <input type="radio" name="custProducts" value="electronics" id="custProducts_2" /> Consumer Electronics </label> <br /> <label> <input type="radio" name="custProducts" value="computer" id="custProducts_3" /> Computer </label> <br /> </p> <p>Description of problem: (Limit 200 characters)</p> <p> <label for="custComplaint"></label> <textarea name="custComplaint" id="custComplaint" cols="45" rows="5"></textarea> </p> <p> <input type="submit" name="button" id="button" value="File Complaint" /> <input type="reset" name="button2" id="button2" value="Reset" /> </p> </form> <p>&nbsp;</p> 

Answer 1

 $("#button").click(function(e){
    e.preventDefault(); // you need to stop the initial event to have a chance to validate
    var validForm=true;
    // etc...

Answer 2

Just to get you started, your submit control in the html has id "button", so you should use $('#button').click , not $('#sendForm').click .

Also, if you want to stay on the page (like to do validations, show errors, etc), you have to prevent the form from submitting automatically when the button is clicked. There are lots of ways to do this, but the easiest way is to just change your button type from submit to button . Ie, replace this:

<input type="submit" name="button" id="button" value="File Complaint" />

with this:

<input type="button" name="button" id="button" value="File Complaint" />
             ------

That should get you started, at least your code will run, you can use console.log to debug, etc. Good luck.

---

UPDATE

I should add that if you take my advice, the form will never submit on it's own - that is good if some validation fails and you want to stay on the page and give some error feedback to the user.

When you do want the form to submit, you have to make it happen yourself. Again, there are lots of ways to do this, but the simplest one is probably:

$('#form1').submit();

Answer 3

You can use jquery.validate.js to validate your forms , it will overcome all your manual efforts to create the validation rules also it is providing the various predefined rules like required,email, minlength and maxlength, etc. So, it will be easier for you to achieve what you need very easily.

https://jqueryvalidation.org/

Answer 4

我有一个简单的jquery表单验证和提交包-看看是否有帮助-易于安装，并且您可以自定义很多内容： https : //github.com/sebastiansulinski/ssd-form