Hello,
I am experimenting with implementing jQuery to validate my form (I hired a programmer one year ago to do this but it seems she made a mess of it so I am attempting to rebuild it.)
I have multiple fields in my form and I wish many of them to be required and the form unable to be submitted until they are filled out.
This morning I added a script that seems to work. At this experimental stage I have only added an email field, but I will soon add many more fields.
My primary question is: How do I control the submit button from being fired when dealing with multiple fields? In the code, below, you will see the script in the head that controls only the email at this point. I do not at all think I should rewrite that for each field, correct? Can I just seperate the field names by commas to get it to see to each field?
Please see code below:
`
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>
<!--Button disable script-->
<script>
$(document).ready(function(){
var checkField;
//checking the length of the value of message and assigning to a variable(checkField) on load
checkField = $("input#Email").val().length;
var enableDisableButton = function(){
if(checkField > 0){
$('#Submit').removeAttr("disabled");
}
else {
$('#Submit').attr("disabled","disabled");
}
}
//calling enableDisableButton() function on load
enableDisableButton();
$('input#Email').keyup(function(){
//checking the length of the value of message and assigning to the variable(checkField) on keyup
checkField = $("input#Email").val().length;
//calling enableDisableButton() function on keyup
enableDisableButton();
});
});
</script>
<!--Button disable script-->
<style>
.container{
margin:0px auto;
background:#eee;
width:60%;
}
.form-area{
padding:1%;
border:1px solid #000;
margin:0px auto;
width:70%;
}
.form-element{
margin-bottom:10px;
padding:10px;
}
.form-element{
padding:10px;
width:70%;
}
#Submit{
padding:10px;
background:#900;
color:#fff;
border-width:0px;
margin-left:2%;
}
.error {
font-weight:bold;
color:#F00;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'form-area'>
<form method = 'post' action = 'jTest1.0.html' id = 'DemoForm' name = 'DemoForm'>
<div class = 'form-element'>
<input type = 'text' name = 'Email' id = 'Email' placeholder = 'Enter Your Email' />
<label id = "Email-error" class = "error" for = "email"></label><br/>
</div>
<input type = 'submit' name = 'Submit' id = 'Submit' value = 'Submit Form' />
</form>
</div>
</div>
<script src = 'jquery.validate.min.js'></script>
<script>
$('#DemoForm').validate ({
rules: {
'Email': {
required:'true',
email: 'true',
}
},
messages:{
'Email':{
required:'Please submit your email.',
email:'Enter a valid email.',
}
},
});
</script>
</body>
</html>
`
Thank you in advance!
Matthew
