Form validation messages not showing

Form validation messages not showing - javascript

I am developing a registration form for a project I am working on. The project uses Bootstrap and jQuery to control form validation and I am using the validate plugin. This is setup in an ASP.NET MVC 4 Web application using C#. I have all my bundles and routing properly configured, but am having no luck with getting messages to display on the form.
Here is the form:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-4">First name</label>
<div class="col-xs-8">
<input type="text" name="textFirstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-4">Last name</label>
<div class="col-xs-8">
<input type="text" name="textLastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-4">Email</label>
<div class="col-xs-8">
<input type="text" name="textEmail" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
<div class="col-xs-8">
<input type="text" name="textEmail2" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-4">Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-4 col-xs-10">
<button type="reset" class="btn btn-info">Clear</button>
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
Here is the JavaScript:
$(document).ready(function () {
$('#formRegister').validate({
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
required: true,
email: true,
equalTo: '#textEmail'
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
required: true,
equalTo: '#passwordPW1'
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function(element){
$(element).closest('.form-control').removeClass('success').addClass('error');
},
success: function(element){
element.text('OK!').addClass('valid')
.closest('.form-control').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});

Properties like messages, highlight are not sub properties of rules
jQuery(function ($) {
$('#formRegister').validate({
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
required: true,
email: true,
equalTo: '#textEmail'
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
required: true,
equalTo: '#passwordPW1'
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-4">First name</label>
<div class="col-xs-8">
<input type="text" name="textFirstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-4">Last name</label>
<div class="col-xs-8">
<input type="text" name="textLastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-4">Email</label>
<div class="col-xs-8">
<input type="text" name="textEmail" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
<div class="col-xs-8">
<input type="text" name="textEmail2" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-4">Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-4 col-xs-10">
<button type="reset" class="btn btn-info">Clear</button>
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>

You need to add a messages container so the messages can be shown somewhere.
Add:
container: '#messages',
on your js function just before the feedbackIcons and
<div class="form-group">
<div id="messages"></div>
</div>

Related

How to call jquery post method after jquery validation success

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.

JQuery Validation Modal Issues

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.

jQuery validate.js only email is not being validated

I am using validate.js to validate my sign-up form. It works fine with all other fields but I don't understand why it does not affect email field.
Here is my validation script:
<script TYPE="text/javascript">
$(document).ready(function(){
$("#signup").validate({
errorElement: 'div',
rules:{
"display_name":{
required: true,
minlength: 5
},
"user_email":{
required:true,
email: true,
remote: {
url: "user/checkEmail.php",
type: "post"
}
},
"password":{
required:true,
minlength:6
},
"confirm_password":{
required:true,
equalTo: "#password"
}
},
messages: {
display_name:{
required: "Please provide your desired display name",
minlength: "Your display name must be at least 5 characters long"
},
user_email:{
required: "Please provide a valid email",
email: "This is not a valid email!",
remote: "Email already in use!"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
confirm_password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
}
});
});
</script>
I have tried different ways to make it work but it doesn't.
Here is my form:
<form class="form-horizontal" NAME="signup" id="signup" method="post" ACTION="users/register_submit.php" enctype="multipart/form-data">
<fieldset>
<!-- Form Name -->
<legend>Sign Up</legend>
<!-- Text input-->
<DIV class="form-group">
<label class="col-md-4 control-label" FOR="name">Display Name</label>
<DIV class="col-md-6">
<input id="display_name" NAME="display_name" TYPE="text" placeholder="" class="form-control input-md" required>
</DIV>
</DIV>
<!-- Text input-->
<DIV class="form-group">
<label class="col-md-4 control-label" FOR="email">Email</label>
<DIV class="col-md-6">
<input id="email" NAME="user_email" TYPE="email" placeholder="example#abc.com" class="form-control input-md" required>
</DIV>
</DIV>
<!-- Password input-->
<DIV class="form-group">
<label class="col-md-4 control-label" FOR="password">Password</label>
<DIV class="col-md-6">
<input id="password" NAME="password" TYPE="password" class="form-control input-md" required>
<span class="help-block">At least 6 characters</span>
</DIV>
</DIV>
<!-- Confirm-Password input-->
<DIV class="form-group">
<label class="col-md-4 control-label" FOR="confirm_password">Confirm Password</label>
<DIV class="col-md-6">
<input id="confirm_password" NAME="confirm_password" TYPE="password" placeholder="" class="form-control input-md" required>
</DIV>
</DIV>
<!-- Button -->
<DIV class="form-group">
<label class="col-md-4 control-label" FOR="submit"></label>
<DIV class="col-md-4">
<input id="submit" NAME="submit" TYPE="submit" class="btn btn-primary">
</DIV>
</DIV>
</fieldset>
</form>
Please help me.
Thanks
EDIT-UPDATE
Here is my code for checkEmail.php. I have tested it and it is working fine if I test it separately.
<?php
require_once("../app/utilities/DatabaseUtility.php");
require_once("../app/helpers/DatabaseHelper.php");
function isEmailExists($email){
$res = array();
$db = new DatabaseUtility('apex');
$dbh = new DatabaseHelper;
$db->connect();
$col_array = array("user_email");
$values = array($email);
if( $statment = $db->prepareStatment('SELECT '.$dbh->getColumns($col_array).' FROM users where user_email = '.$dbh->getPlaceHolders($col_array).'')){
$db->bindParam($statment, $dbh->getPlaceHoldersArray($dbh->getPlaceHolders($col_array)), $values, $dbh->getBindTypes($values));
$statment->execute();
$res = $statment->fetch();
if(!empty($res)){
if(in_array($email,$res)){
echo "false";
}
else
echo "true";
}
else
echo "true";
}
else
echo "Someting is wrong with your query";
$db->releaseResources();
}
$requestedEmail = $_REQUEST['email'];
isEmailExists($requestedEmail);
?>

change the id of the email input to: user_email
Edit: I made a fiddle: https://jsfiddle.net/66oxokta/ which seems to be working fine. What exactly doesn't work at your solution?
user_email:{
required: "this works",
email: "this also works",
remote: "didnt test this"
},

Jquery validator submits when bootstrap form is invalid

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"
},

JQuery Validate individual fieldsets

I've developed a form with multiple fieldsets to represent steps in filling out the complete form. The fieldsets are shown and hidden by button click (one on each fieldset) but I want to validate each fieldset before the next is shown.
I'm new to JQuery and I'm having a bit of trouble. I found this guide ( http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/) that allows me to validate different fieldsets independently but my problem is how do I use that validation to control the showing and hiding of the relevent fieldsets.
I thought the way to do this would be to create a function from each click event for the buttons but I can't seem to call the validate function correctly.
I'm afraid I'm completely confused now! Help!!

I stumbled across this example just before finding your question while googling something else, hoping this will help someone with the same problem:
https://djaodjin.com/blog/jquery-multi-step-validation.blog.html
Basically, apparently validation.js only validates the visible fields by default.
Here's the full example code, click through to the link to see the explanation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Multiple step form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<style type="text/css">
#personal_information,
#company_information{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-5">
<form class="form-horizontal" action="" method="POST" id="myform">
<fieldset id="account_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="conf_password" class="col-lg-4 control-label">Confirm password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Password">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="company_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="company" class="col-lg-4 control-label">Company</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="company" name="company" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="url" class="col-lg-4 control-label">Website url</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="url" name="url" placeholder="Website url">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="personal_information" class="">
<legend>Personal information</legend>
<div class="form-group">
<label for="name" class="col-lg-4 control-label">Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<p><a class="btn btn-primary" id="previous" >Previous</a></p>
<p><input class="btn btn-success" type="submit" value="submit"></p>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".next").click(function(){
var form = $("#myform");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
username: {
required: true,
usernameRegex: true,
minlength: 6,
},
password : {
required: true,
},
conf_password : {
required: true,
equalTo: '#password',
},
company:{
required: true,
},
url:{
required: true,
},
name: {
required: true,
minlength: 3,
},
email: {
required: true,
minlength: 3,
},
},
messages: {
username: {
required: "Username required",
},
password : {
required: "Password required",
},
conf_password : {
required: "Password required",
equalTo: "Password don't match",
},
name: {
required: "Name required",
},
email: {
required: "Email required",
},
}
});
if (form.valid() === true){
if ($('#account_information').is(":visible")){
current_fs = $('#account_information');
next_fs = $('#company_information');
}else if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#personal_information');
}
next_fs.show();
current_fs.hide();
}
});
$('#previous').click(function(){
if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#account_information');
}else if ($('#personal_information').is(":visible")){
current_fs = $('#personal_information');
next_fs = $('#company_information');
}
next_fs.show();
current_fs.hide();
});
});
</script>
</body>
</html>

You can write a custom validation function for each fieldset and call it using the .keyup function. Here is an example:
HTML:
<div id="fieldset1">
<input type="text" name="fname" id="fname">
</div>
<div id="fieldset2">
<!--hidden using css-->
<input type="text" name="fname" id="fname">
</div>
Javascript:
$('#fieldset1 #fname').keyup(function () {
// Runs every time your keystroke is released on this input
if($(this).val() == 'Adam') {
// Checks to see if the field's value is Adam. If it is, then it shows the next fieldset. Otherwise it hides it.
$('#fieldset2').show();
} else {
$('#fieldset2').hide();
}
}
This is obviously meant as a very simple example, but it illustrates what you will need to do in order to validate your form and modify the DOM based on user input.

Using jQuery validation plugin you can get around this by having multiple forms in the same page. You can then call:
$('#myFormId').validate()
on the forms of interest one at the time.

Develop Reference

JavaScript is the programming language of the Web.

Form validation messages not showing - javascript

You need to add a messages container so the messages can be shown somewhere. Add: container: '#messages', on your js function just before the feedbackIcons and <div class="form-group"> <div id="messages"></div> </div>

Related

How to call jquery post method after jquery validation success

JQuery Validation Modal Issues

jQuery validate.js only email is not being validated

Jquery validator submits when bootstrap form is invalid

JQuery Validate individual fieldsets

Categories

Resources