I am using BootStrapValidator in my web app and for some reason unknown to myself the feedbackIcons are not being placed in the input fields and are being placed below the input fields, and from what I see in other examples that the feedbackIcons should be placed inside the input fields and because the feedbackIcons are placed below it is throwing my layout off
Here is the picture of what it currently looks like
Here is an example of how the feedbackIcons are to be displayed
Here is my markup
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.max-size {
max-width: 100%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: white;
background-color: #347AB6;
}
.panel-heading {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.panel {
border-radius: 0px;
}
</style>
<link href="~/Content/bootstrapValidator.min.css" rel="stylesheet" />
</head>
<body>
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active">Customer Data</li>
<li>SubDivision Assignment</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="CustomerData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Customer</strong></div>
<div class="panel-body">
<div class="col-md-6">
<fieldset class="Myfieldset">
<legend class="Mylegend"><h4><b>Address</b></h4></legend>
<div class="form-group">
<label for="txtCustomerFirstName" class="control-label col-md-2" id="lblCustomerFirstName"><b>First Name</b></label>
<div class="col-md-10">
<input id="txtCustomerFirstName" type="text" class="form-control max-size" name="firstname" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerLastName" class="control-label col-md-2" id="lblCustomerLastName"><b>Last Name</b></label>
<div class="col-md-10">
<input id="txtCustomerLastName" type="text" class="form-control max-size" name="lastname" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerAddress1" class="control-label col-md-2" id="lblCustomerAddress1">Address</label>
<div class="col-md-10">
<input id="txtCustomerAddress1" type="text" class="form-control max-size" name="address" />
</div>
</div>
<div class="form-group">
<label for="CustomertxtAddress2" class="control-label col-md-2" id="lblCustomerAddress2">Address2</label>
<div class="col-md-10">
<input id="txtCustomerAddress2" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerCity" class="control-label col-md-2" id="lblCustomerCity">City</label>
<div class="col-md-4">
<input id="txtCustomerCity" type="text" class="form-control max-size" name="city" />
</div>
<label for="txtCustomerCounty" class="control-label col-md-2" id="lblCustomerCounty">County</label>
<div class="col-md-4">
<input id="txtCustomerCounty" type="text" class="form-control" name="County" />
</div>
</div>
<div class="form-group">
<label for="acState" class="control-label col-md-2" id="lblCustomerState"><b>State</b></label>
<div class="col-md-4">
<select id="acState" class="form-control" name="state"></select>
</div>
<label for="txtCustomerZip" class="control-label col-md-2" id="lblCustomerZip">Zip/Postal</label>
<div class="col-md-4">
<input id="txtCustomerZip" type="text" class="form-control" name="zip" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerYearBuilt" class="control-label col-md-2" id="lblCustomerYearBuilt">Year Built</label>
<div class="col-md-10">
<input id="txtCustomerYearBuilt" type="text" class="form-control max-size" name="yearbuilt" />
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="Myfieldset">
<legend class="Mylegend"><h4><b>Contact</b></h4></legend>
<div class="form-group">
<label for="txtCustomerContact" class="control-label col-md-2" id="lblCustomerContact">Contact</label>
<div class="col-md-10">
<input id="txtCustomerContact" type="text" class="form-control max-size" name="customercontact" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerEmail" class="control-label col-md-2" id="lblAdministrationModeratorEmail"><b>Email</b></label>
<div class="col-md-10">
<input id="txtCustomerEmail" type="text" class="form-control max-size" name="email" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2" id="lblCustomerPhone">Phone</label>
<div class="col-md-10">
<input id="txtPhone" type="text" class="form-control max-size" name="phone" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerFax" class="control-label col-md-2" id="lblCustomerFax">Fax</label>
<div class="col-md-10">
<input id="txtCustomerFax" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerMobile" class="control-label col-md-2" id="lblCustomerMobile">Mobile</label>
<div class="col-md-10">
<input id="txtCustomerMobile" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerOther" class="control-label col-md-2" id="lblCustomerOther">Other</label>
<div class="col-md-10">
<input id="txtCustomerOther" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="SubDivisionAssignment">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit SubDivision Assignment</strong></div>
<div class="panel-body">
Off
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<button id="btnSave" type="button" class="btn btn-primary pull-right">Save</button>
</div>
</div>
<script src="~/Scripts/Customjs/Customer/CustomerEditorJS.js"></script>
</body>
</html>
and here is my BootstrapValidator code
function ValidateCustomer(){
var validator = $("#CustomerData").bootstrapValidator({
excluded: ':disabled',
container: 'tooltip',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields: {
firstname: {
message: "First Name is required",
validators: {
notEmpty: {
message: "Please add First Name"
}
}
},
lastname: {
message: "Last Name is required",
validators: {
notEmpty: {
message: "Please add Last Name"
}
}
},
address: {
message: "Address is required",
validators: {
notEmpty: {
message: "Please add Address"
}
}
},
city: {
message: "City is required",
validators: {
notEmpty: {
message: "Please add City"
}
}
},
zip: {
message: "ZipCode is required",
validators: {
notEmpty: {
message: "Please add ZipCode"
}
}
},
city: {
message: "City is required",
validators: {
notEmpty: {
message: "Please add City"
}
}
},
state: {
message: "State is required",
validators: {
notEmpty: {
message: "Please add State"
}
}
},
yearbuilt: {
message: "Year Built is required",
validators: {
notEmpty: {
message: "Please add Year Built"
}
}
},
phone: {
message: "Phone is required",
validators: {
notEmpty: {
message: "Please add Phone"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide Email address"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
customercontact: {
message: "Contact name is required",
validators: {
notEmpty: {
message: "Please add Contact name"
}
}
}
},
});
}
Related
I have a form that deals with registration like below:
I want to validate each tab instead of the entire form so user have to fill up first tab before moving to the next. I tried using validator.element( "email" ) but it does not respond at all.
This is my code:
<form method="POST" action="{{ route('register') }}" id="register-form">
#csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button bjsh-btn-gradient" id="next-btn">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" required placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
#foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
Script (broken):
var validator = $( "#register-form" ).validate({
rules: {
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 8,
},
password_confirmation:{
required: true,
minlength: 8,
equalTo: "#password"
}
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Password does not match"
}
});
$('#next-btn').click(function() {
var validator = $( "#myform" ).validate();
validator.element("email");
});
How do I make it work considering I need to validate each tab before the final tab which has a submit button?
I used a bootstrap 4 css styling for the example code, this can easily be changed by adding your own css to the JQuery class functions.
I used a toggling of attributes and classes as well as a msg field to display error and success messages for the example. Specifically I am disabling the input fields proceeding the focused input until one has been finished the proceeding fields lock. Once the match on the passwords is complete the submit button unlocks.
UPDATE March 22nd 2020:
Added minimum requirement for password.
You can also add required characters to the password section as well, just add a regex with matching characters in the password and password confirm sections of the JQuery code.
IMPORTANT NOTE: Front end validation should only be done for formatting really, the bulk of your validation should be done on the backend!
$("#confirm_password").keyup(function() {
var passLength = $(this).val().length;
var minLength = 8;
if (passLength < minLength) {
$("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else if ($("#password").val() != $(this).val()) {
$("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Passwords matched, you can submit the form now").removeClass("alert-danger").addClass("alert alert-success");
$("#submit").prop('disabled', false);
}
});
$("#password").keyup(function() {
var passLength = $(this).val().length;
var minLength = 8;
if (passLength < minLength) {
$("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else if ($(this).val() != $("#confirm_password").val()) {
$("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
$("#submit").prop('disabled', false);
}
});
$("#usr_email").change(function() {
var sEmail = $(this).val();
if ($.trim(sEmail).length == 0) {
$("#msg").html("Email is mandatory").removeClass("alert-success").addClass("alert alert-danger");
$("#password").prop('disabled', true);
$("#confirm_password").prop('disabled', true);
$("#submit").prop('disabled', true);
} else if (validateEmail(sEmail)) {
$("#msg").html("Your Email is valid, now you can continue").removeClass("alert-danger").addClass("alert alert-success");
$("#password").prop('disabled', false);
$("#confirm_password").prop('disabled', false);
$("#submit").prop('disabled', true);
} else {
$("#msg").html("Invalid Email address").removeClass("alert-success").addClass("alert alert-danger");
$("#password").prop('disabled', true);
$("#confirm_password").prop('disabled', true);
$("#submit").prop('disabled', true);
}
});
// Function that validates email address through a regular expression.
function validateEmail(sEmail) {
var filter = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
if (filter.test(sEmail)) {
return true;
} else {
return false;
}
}
<!-- Bootstrap 4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form method="post">
<label for="usr_email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="usr_email" name="usr_email" placeholder="EMAIL" required>
</div>
<label for="usr_password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" id="password" type="password" name="usr_password" placeholder="PASSWORD" required>
</div>
<label for="confirm_password" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-10">
<input class="form-control" id="confirm_password" type="password" name="confirm_password" placeholder="CONFIRM PASSWORD" required>
</div>
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<div class="col-sm-6" id="msg"></div>
I want to display error when the user doesn't enter in the input field after he clicks on the submit button. This display should be displayed at right of the input field. But i can't seem to figure out how is that possible using php and javascript. Here is my code:
<?php include "head.php";?>
<div class="container">
<?php
if(isset($_SESSION["error"]) && $_SESSION["error"] != ""){
echo $_SESSION["error"];
}unset($_SESSION["error"]);
if(isset($_SESSION["error1"]) && $_SESSION["error1"] != ""){
echo $_SESSION["error1"];
}unset($_SESSION["error1"]);
if(isset($_SESSION["warning"]) && $_SESSION["warning"] != ""){
echo $_SESSION["warning"];
}unset($_SESSION["warning"]);
if(isset($_SESSION["warning1"]) && $_SESSION["warning1"] != ""){
echo $_SESSION["warning1"];
}unset($_SESSION["warning1"]);
if(isset($_SESSION["success"]) && $_SESSION["success"] != ""){
echo $_SESSION["success"];
}unset($_SESSION["success"]);
?>
<form class="form-horizontal" action="loginprocess.php" method="post">
<!--username input--->
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">username</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" name="username">
</div>
</div>
<!--password input --->
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-
label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3"
placeholder="Password" name="password">
</div>
</div>
<!-- input file --->
<div class="form-group">
<label for="exampleInputFile" class="col-sm-3 control-label">File
input</label>
<div class="col-sm-6">
<input type="file" id="exampleInputFile" name="file">
<!--<p class="help-block">Example block-level help text here.</p>-->
</div>
</div>
<!-- selecting country --->
<div class="form-group">
<label for="country" class="col-sm-3 control-label">Select Country</label>
<div class="col-sm-6">
<select class="form-control" id="country" name="country[]">
Nepal
<span class="caret"></span>
<option>Nepal</option>
<option>USA</option>
<option>Dubai</option>
<option>Nepal</option>
<option>USA</option>
<option>Dubai</option>
<option>Nepal</option>
<option>USA</option>
<option>Dubai</option>
</select>
</div>
</div>
<!-- checkbox--->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" name="remember me"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<script>
$(function () {
$("[data-toggle="tooltip"]").tooltip()
})
</script>
<?php
print_r ($_POST);
?>
<?php include "foot.php";?>
https://www.w3schools.com/js/js_validation.asp
Check this. Alternatively you could work with php only and show the message after the form has been submitted (in form handler).
Here you have some more examples using bootstrap:
http://1000hz.github.io/bootstrap-validator/
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply your phone number'
},
phone: {
country: 'US',
message: 'Please supply a vaild phone number with area code'
}
}
},
address: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply your city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
comment: {
validators: {
stringLength: {
min: 10,
max: 200,
message: 'Please enter at least 10 characters and no more than 200'
},
notEmpty: {
message: 'Please supply a description of your project'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({
opacity: "show"
}, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
#success_message {
display: none;
}
<head>
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Us Today!</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First 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 name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">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 name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Phone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker">
<option value=" " >Please select your state</option>
<option>Alabama</option>
<option>Alaska</option>
<option >Arizona</option>
<option >Arkansas</option>
<option >California</option>
<option >Colorado</option>
<option >Connecticut</option>
<option >Delaware</option>
<option >District of Columbia</option>
<option> Florida</option>
<option >Georgia</option>
<option >Hawaii</option>
<option >daho</option>
<option >Illinois</option>
<option >Indiana</option>
<option >Iowa</option>
<option> Kansas</option>
<option >Kentucky</option>
<option >Louisiana</option>
<option>Maine</option>
<option >Maryland</option>
<option> Mass</option>
<option >Michigan</option>
<option >Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option> Uttah</option>
<option>Vermont</option>
<option>Virginia</option>
<option >Washington</option>
<option >West Virginia</option>
<option>Wisconsin</option>
<option >Wyoming</option>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Zip Code</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="Zip Code" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Website or domain name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
</div>
</div>
</div>
<!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- /.container -->
https://codepen.io/jaycbrf/pen/iBszr
I want to validate a 12 digit phone number in the form of this format
92xxxxxxxxxx.
eg:923337690977, 921234567890
$(document).ready(function () {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply your phone number'
},
phone: {
country: 'PK',
message: 'Please supply a vaild phone number with area code'
}
}
},
address: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply your city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
comment: {
validators: {
stringLength: {
min: 10,
max: 200,
message: 'Please enter at least 10 characters and no more than 200'
},
notEmpty: {
message: 'Please supply a description of your project'
}
}
}
}
})
.on('success.form.bv', function (e) {
$('#success_message').slideDown({
opacity: "show"
}, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function (result) {
console.log(result);
}, 'json');
});
});
#success_message{ display: none;}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Contact form with Validation</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>
</head>
<body>
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Us Today!</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First 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 name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >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 name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Phone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="923xxxxxxxx0" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select your state</option>
<option>Alabama</option>
<option>Alaska</option>
<option >Arizona</option>
<option >Arkansas</option>
<option >California</option>
<option >Colorado</option>
<option >Connecticut</option>
<option >Delaware</option>
<option >District of Columbia</option>
<option> Florida</option>
<option >Georgia</option>
<option >Hawaii</option>
<option >daho</option>
<option >Illinois</option>
<option >Indiana</option>
<option >Iowa</option>
<option> Kansas</option>
<option >Kentucky</option>
<option >Louisiana</option>
<option>Maine</option>
<option >Maryland</option>
<option> Mass</option>
<option >Michigan</option>
<option >Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option> Uttah</option>
<option>Vermont</option>
<option>Virginia</option>
<option >Washington</option>
<option >West Virginia</option>
<option>Wisconsin</option>
<option >Wyoming</option>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Zip Code</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="Zip Code" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Website or domain name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
</div>
</div>
</div>
<!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
</body>
</html>
The code is working fine for 10 digit phone number .but i need it for 12 digit phone number.
Thanks in advance .
He're what you probably want:
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply your phone number'
},
// "regexp" instead of "phone"
regexp: {
regexp: /^92\d{10}$/,
message: 'Please supply a valid phone number in the form 92xxxxxxxxxx'
}
}
},
address: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply your city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
comment: {
validators: {
stringLength: {
min: 10,
max: 200,
message: 'Please enter at least 10 characters and no more than 200'
},
notEmpty: {
message: 'Please supply a description of your project'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({
opacity: "show"
}, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
#success_message {
display: none;
}
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Us Today!</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First 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 name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">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 name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Phone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="923xxxxxxxx0" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker">
<option value=" ">Please select your state</option>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>District of Columbia</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>daho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Mass</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Uttah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Zip Code</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="Zip Code" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Website or domain name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
</div>
</div>
</div>
<!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" />Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" />No
</label>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- /.container -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<input name="phone" placeholder="923xxxxxxxx0" value="" class="form-control" type="text">
<script>
$(document).ready(function(){
$('input[name=phone]').val().startsWith('92'); // it returns boolean true: if match,false: if not match
});
</script>
I'm trying out a new plugin which is called jquery.validation.js and it seems that after I try to apply them it doesn't work. Can someone kindly help me on this?
Here's the page.html
<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname"/>
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel">
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone#example.com" id="email">
</div>
</div>
<!-- End .form-group -->
</form>
div class="row">
<div class="col-md-1"></div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<button name="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="submit" id="cancel" class="btn btn-default pad">Cancel</button>
</div>
</div>
Here's what the angular.controller.js looks
function AddCustomerController($scope, $location, $rootScope, $http, CustService) {
(function initController() {
})();
$scope.AddCustomer = function () {
var CustomerDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
CustService.Customer(CustomerDetails, function (res) {
console.log(res);
$.extend($.gritter.options, {
position: 'bottom-right',
});
if (res.data == 'success') {
$.gritter.add({
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
});
$scope.CusDetails = {};
}
else {
$.gritter.add({
title: 'Failed!',
text: 'Failed to add a new customer. Please retry.',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
});
}
});
}
}
And finally the validation.js for validating above form
$(document).ready(function () {
$("#CustomerDetails").validate({
debug:true,
errorPlacement: function (error, element) {
var place = element.closest('.input-group');
if (!place.get(0)) {
place = element;
}
if (error.text() !== '') {
place.after(error);
}
},
errorClass: 'help-block',
rules: {
cname: {
required: true,
},
comname: {
required: true
},
ctel: {
required: true,
min: 10
},
email: {
required: true,
email: true
}
},
messages: {
cname: {
required: "Please enter customer name!"
},
comname: {
required: "Please enter company name!"
},
ctel: {
required: "Please enter telephone number",
minlength: "Telephone number should be atleast 10 digits"
}
},
highlight: function (label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (label) {
$(label).closest('.form-group').removeClass('has-error');
label.remove();
}
});
});
The error from debuggging from the built in function in validation says:
Nothing selected, can't validate, returning nothing.
What am I doing wrong? Why isn't the validation.js isn't getting called?
Help would be greatly appreciated.
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>