my website is based off of only one php index file that changes the contents of the site based on the header variables. www.mydomain.com/?page=contact loads and brings up a form that i am having the user fill out.
i have some jQuery that SHOULD detect if there are any missing fields:
$("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;
});
});
but it is not working....
Put return isFormValid out of loop (otherwise you are overwriting its value again and again):
$("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
});
Maybe something like this?
$("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;
});
Or even shorter:
$("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;
});
DEMO: http://jsfiddle.net/YS6gw/
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>
