So I am new to bootstrap and so far I've got everything working the way I want. I have created a contact form which uses the Modal Form and sends the email via PHP using the Mail function.
I have created a script to do the validation on the form. If the validation passes I want the email to be sent out.
Currently when the user submits the form that is blank the validation isn't working and the email is getting sent.
Please keep in mind I'm am new to working with bootstrap.
HTML
<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
<p><b>XXXX</b><br>
Company Phone: XXXXX
</p>
</div>
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here.">
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here.">
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here.">
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
Script
$(document).ready(function()
{
$validator = $("#contactForm").validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 10
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
name: {
required: '<span class="help-inline">Your name is required</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
subject: {
required: '<span class="help-inline">A Subject is required.
</span>',
minlength:jQuery.format('<span class="help-inline">10 characters</span>')
},
email: {
required: '<span class="help-inline">Email.</span>',
email: '<span class="help-inline">Ex : name#exemple.com</span>'
},
message: {
required: '<span class="help-block">Message</span>',
minlength: jQuery.format('<span class="help-block">10 chars</span>')
}
},
submitHandler: function(form)
{
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0)
{
$('#submit').modal('hide');
} else
{
$('#submit').modal('show');
}
});
}
});
});
On each input field add 'required'. Simple way to ensure each field has data
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required />
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required />
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required />
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Did you already include jquery and validation library?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
pass your form to your button with attribute
<button type="submit" class="btn btn-primary" form="ContactUs">Submit</button>
you should put your form id inside that
Related
I have a problem which I dont seem to find a solution for. The problem is this: I have some jQuery which will keep the button disabled until all the form's fields are filled up. When all the fields are filled up the button is being enabled, but the javascript onSubmit event used for the google recaptcha is not being trigerred. Anyone can help in this, please
Code is the one below:
//jquery to disable button until all fields are filled up
$().ready(function() {
// validate signup form on keyup and submit
$("#fbForm").validate({
rules: {
name: {
required: true
},
surname: {
required: true
},
terms: {
required: true
}
},
errorPlacement: function(error, element) {
return true;
},
submitHandler: function() {
}
});
$('#fbForm').change(function() {
if ($("#fbForm").valid()) {
$("#btnSubmit").removeAttr("disabled");
}
});
//recaptcha JS
function onSubmit(token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
}
<form id="fbForm"class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
<div class="form-group">
<label for="name "class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<!-- Surname: Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
I agree
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
You are missing a } at the last line to close the ready function. Fix that first.
$().ready(function() {
$('#num').validate();
// validate signup form on keyup and submit
$("fbForm").validate({
rules: {
name: {
required: true
},
surname: {
required: true
},
terms: {
required: true
}
},
errorPlacement: function(error, element) {
return true;
},
submitHandler: function() {
}
});
$('#fbForm').change(function() {
if ($("#fbForm").valid()) {
$("#btnSubmit").removeAttr("disabled");
}
});
//recaptcha JS
function onSubmit(token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<form name="formSend" id="fbForm" class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
<fieldset>
<div class="form-group">
<label for="name "class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<!-- Surname: Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
I agree
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
Okay, Missing jquery validtor and syntax errors were causing the problem. The snippet works fine.You should use visual code as editor and please resolve syntax errors before posting here.
I am trying password mismatch error to be displayed when user put two different passwords in input fields on user registration form, but in my program it displays error message already in input field. In my program, the unbind() method is not working.
HTML:
<form action="adduser.php" method="POST" id="registerCandidates" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input-lg" type="password" id="password" name="password" placeholder="Password *" required>
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" id="cpassword" name="cpassword" placeholder="Confirm Password *" required>
</div>
<div id="passwordError" class="btn btn-flat btn-danger hide-me" >
Password Mismatch!!
</div>
<div class="form-group">
<button type="submit" class="btn btn-flat btn-success" name="register">Register</button>
</div>
</form>
Jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#registerCandidates").bind("submit", function(e) {
e.preventDefault();
if( $('#password').val() != $('#cpassword').val() )
{
$('#passwordError').show();
}
else
{
$(this).unbind('submit').submit();
}
});
});
</script>
Image (it is my user registration form image):
You don't need to unbind. Just avoid calling e.preventDefault() when you want to allow the form to submit. So put that call in the if branch where validation fails.
$("#registerCandidates").bind("submit", function(e) {
if( $('#password').val() != $('#cpassword').val() )
{
$('#passwordError').show();
e.preventDefault();
}
});
When the user edits the password fields after a failing submit, you should hide the error message.
$("#password, #cpassword").on("input", function() {
$("#passwordError").hide();
});
Here is full working code
$("#registerCandidates").bind("submit", function(e) {
if ($('#password').val() != $('#cpassword').val()) {
$('#passwordError').show();
e.preventDefault();
}
});
$("#password, #cpassword").on("input", function() {
$("#passwordError").hide();
});
.hide-me {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="adduser.php" method="POST" id="registerCandidates" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input-lg" type="password" id="password" name="password" placeholder="Password *" required>
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" id="cpassword" name="cpassword" placeholder="Confirm Password *" required>
</div>
<div id="passwordError" class="btn btn-flat btn-danger hide-me">
Password Mismatch!!
</div>
<div class="form-group">
<button type="submit" class="btn btn-flat btn-success" name="register">Register</button>
</div>
</form>
When I am calling submithandler in validation rules, I want to call post function to submit the form but it's not firing.
Below is my code
$(function() {
$.validator.addMethod("time", function(value, element) {
return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
}, "Please enter a valid time (24 Hour Format).");
//^(([0-1]?[0-2])|([2][0-3])):([0-5]?[0-9])(a|p)m?$ 12 hour
// /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i 24 hour
// alert($(#isNoOfExecutionSet").val());
jQuery.validator.setDefaults({
highlight: function(element) {
jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'label label-danger',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('#form').validate({
rules: {
full_name: {
required: true,
minlength: 3,
maxlength: 100
// email: true
},
short_name: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
password: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
total_branches: {
required: true,
number: true
// email: true
},
confirm: {
equalTo: "#password"
},
submitHandler: function(form) {
alert('jj');
}
}
});
}); // end of function
below is my html code
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<h2> Institute Info</h2>
<form role="form" method="post" id="form">
<hr class="colorgraph">
<p style="color:#f0776c;float:left" id="msg"></p>
<div class="form-group">
<input type="text" class="form-control input-lg" id="full_name" name="full_name" type="full_name" value="saljdf" placeholder="Enter Full Name">
</div>
<div class="form-group">
<input type="tet" class="form-control input-lg" id="short_name" name="short_name" type="short_name" value="saljdf" placeholder="Enter Short Name">
</div>
<div class="form-group">
<input type="number" class="form-control input-lg" id="total_branches" name="total_branches" value="12" type="total_branches" placeholder="Enter Total Branches Allowed">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="password" name="password" type="password" value="123" placeholder="Enter Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="confirm" name="confirm" type="password" value="saljdf" placeholder="Confirm Password">
</div>
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Active" >Active</option>
<option value="Non-Active" >Non-Active</option>
</select>
</div>
<hr class="colorgraph">
<div class="row">
<!--<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>-->
<div class="col-xs-12 "><button type="submit" class="btn btn-lg btn-primary btn-block" name="btnsave" value="btnsave" id="btnsave">Create Institute</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You mean ajax call i.e jquery post method.
You can write ajax call withun function and whenever your form valiate successfully call the same ajax function from that loop/conditional statement.
Like.
function myFunction(){
// JQuery post method i.e Ajax call
}
$("form"). submit(function(){
// validation cade
if(validate){
myFunction();
}
});
This is no exact code, I just try to suggest the solution it works for me in many projects you can try.
I am new to coding and am wracking my brain on this and hope you can help. I am having a bit of trouble solving my registration page. I am using JQuery validation and a Modal within the page. I had my validation working correctly but can't seem to get it working with the modal. What is wrong with my validation coding What am I missing here to keep it from working?
<!doctype html>
<html>
<head>
<script src="/Root/JS/jquery-1.11.2.js"></script>
<script src="/Root/JS/bootstrap.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<script src="/Root/JS/contactus-form.js"></script>
<link href="/Root/CSS/newstyle.css" rel="stylesheet" type="text/css">
<link href="/Root/CSS/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/Root/CSS/bootstrap/bootstrap-theme.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="modal-title" id="myModalLabel">Registration</h1>
</div> <!-- close modal header -->
<div class="modal-body">
<div id="formWrap" >
<form id="contactform" name='test' class="form-horizontal contactus" method="post" action='' accept-charset='UTF-8'>
<p><label class="error control-label">* Required Field.</label></p>
<div class="form-group">
<label class="col-xs-3 control-label">Full name<span class="error">*</span></label>
<div class="col-xs-4" id="firstname">
<input type="text" class="form-control" name="firstname" placeholder="First Name"/>
</div>
<div class="col-xs-4" id="lastname">
<input type="text" class="form-control" name="lastname" placeholder="Last Name"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-4" id="address">
<input type="text" class="form-control" name="address" placeholder="Address"/>
</div>
<div class="col-xs-4" id="address2">
<input type="text" class="form-control" name="address2" placeholder="Address (2)"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-3" id="city">
<input type="text" class="form-control" name="city" placeholder="City"/>
</div>
<div class="col-xs-2" id="state">
<select class="form-control" name="state"/>
<option>IN</option>
<option>AL</option>
<option>AR</option>
<option>AZ</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>IA</option>
<option>ID</option>
<option>IL</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>MA</option>
<option>MD</option>
<option>ME</option>
<option>MI</option>
<option>MN</option>
<option>MO</option>
<option>MS</option>
<option>MT</option>
<option>NC</option>
<option>ND</option>
<option>NE</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NV</option>
<option>NY</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VA</option>
<option>VT</option>
<option>WA</option>
<option>WI</option>
<option>WV</option>
<option>WY</option>
</select>
</div>
<div class="col-xs-3" id="zip">
<input type="text" class="form-control" name="zip" placeholder="Zip Code"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone number<span class="error">*</span></label>
<div class="col-xs-3" id="cell">
<input type="text" class="form-control" name="cell" placeholder="cell"/>
</div>
<div class="col-xs-3" id="home">
<input type="text" class="form-control" name="home" placeholder="home"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address<span class="error">*</span></label>
<div class="col-xs-5" id="email">
<input type="email" class="form-control" name="email"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password<span class="error">*</span></label>
<div class="col-xs-5" id="password">
<input type="password" class="form-control" name="password"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirm Password<span class="error">*</span></label>
<div class="col-xs-5" id="passwordconfirm">
<input type="password" class="form-control" name="passwordconfirm"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Real Estate Interest<span class="error">*</span></label>
<div class="col-xs-5">
<div class="checkbox" id="realestate">
<label><input type="checkbox" value="Purchase"/>Purchase</label>
<label><input type="checkbox" value="Sell" />Sell</label>
<label><input type="checkbox" value="Rent" />Rent</label>
<br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 g-recaptcha" data-sitekey="###"></div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" id="contactbtn" class="btn btn-primary" name="register" value="Submit">Submit</button>
</div>
</div>
</form>
<script>
$("#contactform").validate();
</script>
</div> <!--close formWrap -->
</div> <!--close modal-body-->
</div><!-- close modal content -->
</div><!-- close modal-dialog -->
</div> <!-- close modal-fade -->
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="register" data-toggle="modal" data-target="#signIn">Register Here</button>
</div><!-- end .content -->
</div><!-- end .container -->
</body>
</html>
This is my for my contactus-form.js as listed in the html.
//Form Validation for Modal
$().ready(function(){
$("#contactform").validate({
rules: {
firstname: "required",
lastname: "required",
cell: {
required: true,
minlength: 10,
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6,
maxlength: 32
},
passwordconfirm: {
required: true,
minlength: 6,
maxlength: 32,
equalTo: "#password"
},
realestate: {
required: true,
rangelength: [1,3]
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter last name",
cell: {
required: "Please enter a cell number",
minlength: "Please include area code",
},
password: {
required: "Please enter a password",
minlength: "Password must be between 6 and 32 characters", maxlength: "Password must be between 6 and 32 characters"
},
passwordconfirm: {
required: "Please re-enter password",
minlength: "Password must be between 6 and 32 characters",
maxlength: "Password must be between 6 and 32 characters",
equalTo: "Password confirm does not email the password"
},
realestate:{
required: "Please select at least one"
},
}
}
});
});
I noticed you are using validation on same form more then one time. In this situation only the first call will take effect multiple jquery validators on one form which in your case is $("#contactform").validate(); and second one will be ignored.
Removing some of your rules, but leaving the structure intact, we can see the problem...
$().ready(function(){
$("#contactform").validate({
rules: {
// .... other rules clipped
realestate: {
required: true,
rangelength: [1,3]
},
messages: {
// .... other rules clipped
realestate:{
required: "Please select at least one"
},
}
}
});
});
You've put the messages option inside of the rules option, thereby breaking the plugin.
Within the .validate() method, messages is supposed to be a sibling of rules.
Should look like this...
$(document).ready(function(){
$("#contactform").validate({
rules: {
// .... other rules
realestate: {
required: true,
rangelength: [1,3]
}
}, // <- close 'rules' option
messages: {
// .... other rules
realestate:{
required: "Please select at least one"
}
} // <- close 'messages' option
});
});
You should also fix your DOM ready handler. $().ready(function(){... is "not recommended" as per the jQuery documentation.
As already stated in the other answer, you cannot call $("#contactform").validate(...) more than once on the same form. It does not matter that one is in the HTML. Only the first instance is used to initialize the plugin and all subsequent instances will be ignored. If you made a mistake in posting your OP, then edit it so that we can rule that out as the root cause.
So basically, when the form is valid it should link to a new page that says success. that part works fine.
However if the form is invalid the form still submits, specifically i noticed as long as the all three fields are filled in the form submits even if the passwords do not match. If one of the fields is left blank then it does not submit (as it should)
Is there a problem with my validate function i am not seeing or is it in the bootstrap?
demo The demo submits on the second click for some reason
jquery validate
$(document).ready(function() {
$('#signin').validate({
rules: {
name: {
required: true,
name: true
},
password: {
required: true,
rangelength:[8,12]
},
confirmPassword: {equalTo:'#password'},
spam: "required"
},
messages: {
name: {
required: "Please supply a Username."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 12 characters long.'
},
confirmPassword: {
equalTo: 'The passwords do not match.'
}
},
});
});
HTML
<div class="container">
<div class="col-lg-6">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form">
<div class="form-group">
<label for="inputUsername" class=" required col-lg-2 control-label">UserName</label>
<div class="col-lg-5">
<input name="name" type="text" class="form-control" id="username" placeholder="Username"required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class=" required col-lg-2 control-label">Password</label>
<div class="col-lg-5">
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-lg-2 control-label">Confirm Password</label>
<div class="col-lg-5">
<input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder=" Retype Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submit" id="submit" class="btn btn-default">SignIn</button>
</div>
</div>
</div>
</form>
Ok, you need to remove the extraneous name param.
name: {
required: true
, name: true
},
RULES:
:rules: {
name: {
required: true
},
password: {
required: true,
rangelength:[8,12]
},
confirmPassword: {equalTo:'#password'},
spam: "required"
},