jQuery表单验证无效

Question

This code isn't doing anything when I submit the form. What am I doing wrong? In the HTML, an error message is shown or hidden based on a class.

I hope you can help me figure out this problem. Thanks in advance.

 $(document).ready(function() { function validateForm() { var first_name = $("#first_name").value; var last_name = $("#last_name").value; var phone = $("#phone").value; var email = $("#email").value; var code = $("#vali_code").value; var ssn = $("#ssn").value; var income = $("#nm_income").value; var error = $(this).find("span.error_txt").removeClass(".hidden").addClass(".show"); var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/; if (first_name === "") { error; } if (last_name === "") { error; } if (email === "" || email !== emailReg) { error; } if (phone === "" || phone < 9) { error; } if (ssn === "" || ssn > 4) { error; } if (income === "") { error; } if (code === "") { error; } return true; } }); 

Answer 1

If you call the function in inline event onsubmit you should add return keyword to the function call in your form inline event like :

<form onsubmit='return validateForm()'>

But I think the main problem comes from the .value in your code it should be replaced by .val() since the value isn't an attribute of jQuery objects.

My suggestion is to attach the submit event in the JS code like the snippet below.

NOTE: The argument passed to removeClass() and addClass() methods shouldn't contains dot . at the start.

 $(function() { $('form').on('submit', validateForm); }) function validateForm() { var first_name = $("#first_name").val(); var last_name = $("#last_name").val(); $(this).find("span.error_txt").removeClass("hidden").addClass("show"); if (first_name === "") { return false; } if (last_name === "") { return false; } alert('Form will be submited.'); return true; } 

 .hidden { display: none; } .show { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id='first_name'><br> <input id='last_name'><br> <button>Submit</button> <span class="error_txt hidden">Error occurred check you form fields again.</span> </form> 

Answer 2

如果表单无效，则需要return false ，否则将被提交。