мой сайт основан только на одном файле индекса php который изменяет содержимое сайта на основе переменных заголовка. www.mydomain.com/?page=contact загружает и отображает форму, которую я заполняю пользователем.
У меня есть jQuery который ДОЛЖЕН обнаруживать, есть ли какие-либо недостающие поля:
$("form").submit(function() { var isFormValid = true; $(".required").each(function() { if ($.trim($(this).val()) == "") { $(this).addClass("highlight"); isFormValid = false; } else { $(this).removeClass("highlight"); } if (!isFormValid) alert("Please fill in all the required fields (indicated by *)"); return isFormValid; }); });
Но это не работает….
Поместите return isFormValid из цикла ( иначе вы снова и снова перезаписываете его значение ):
$("form").submit(function() { var isFormValid = true; $(".required").each(function() { if ($.trim($(this).val()) == "") { $(this).addClass("highlight"); isFormValid = false; } else { $(this).removeClass("highlight"); } }); if (!isFormValid) alert("Please fill in all the required fields (indicated by *)"); return isFormValid; // put out of loop });
Может, что-то вроде этого?
$("form").submit(function() { var isFormValid = true; $(".required").each(function() { if ($.trim($(this).val()) == "") { $(this).addClass("highlight"); isFormValid = false; } else { $(this).removeClass("highlight"); } }); // the following lines should be placed here if (!isFormValid) { alert("Please fill in all the required fields (indicated by *)"); } return isFormValid; });
Или даже короче:
$("form").submit(function() { var isFormValid = $(".required").removeClass("highlight").filter(function() { return $.trim(this.value) == ""; }).addClass("highlight").length == 0; if (!isFormValid) { alert("Please fill in all the required fields (indicated by *)"); } return isFormValid; });
Can you post the html works perfectly fine for me. Here is my Code : ------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("form").submit(function() { var isFormValid = true; $(".required").each(function() { if ($.trim($(this).val()) == "") { $(this).addClass("highlight"); isFormValid = false; } else { $(this).removeClass("highlight"); } if (!isFormValid) alert("Please fill in all the required fields (indicated by *)"); return isFormValid; }); }); }); </script> <style type="text/css"> #divMain {vertical-align: bottom;} .div1_style {background: #ffe4b5} .div2_style {background: #79b7e7} .highlight {background: #cd0a0a} .div_disabled_style {background: #6f6e73} </style> </head> <body> <form action="#" method="post"> <div id="divMain" align="center"> <div id="div1" class="div2_style"> <input type="checkbox" id="checkBox1"> <input type="text" class ="required" id="text1"/> <input type="text" class ="required" id="text2"/> <input type="text" class ="required" id="text3"/> <button type="submit" id="btnSubmit">Submit</button> </div> </div> </form> </body> </html>