Reset button and bootstrap validation on Option change in select

Reset button and bootstrap validation on Option change in select - javascript

I have select with options. On option change i show different divs and use bootstrap validator before submit. If input is empty and press on button it goes to disable. And on option change button is not activating. How can I reset inputs and button on option change?
$('#shexsselect').on('change', function() {
value = $(this).val();
if (value == 1) {
//do something
} else {
//do something
}
});
$(document).ready(function() {
$('#form_fin').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon',
invalid: 'glyphicon',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
pinofsv: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'for label 2'
},
}
},
shexsselect: {
validators: {
notEmpty: {
message: 'choose'
}
}
},
voen: {
validators: {
notEmpty: {
message: 'for label2'
}
}
}
}
});
});
<form name="form_fin" id="form_fin" action="" method="POST">
<div class="col-sm-12">
<div class="form-group" id="shexsdiv">
<label>Selectionn: </label>
<select class="form-control " name="shexsselect" id="shexsselect" required>
<option value='' selected disabled>Choose</option>
<option value='1'>First</option>
<option value='2'>Second</option>
</select>
</div>
</div>
<div class="col-sm-12" id="voendiv">
<div class="form-group">
<label>label2:</label>
<input type="text" class="form-control " name="voen" id="voen">
</div>
</div>
<div class="col-sm-12" id="fin_input">
<div class="form-group">
<label>Label2:</label>
<div class="input-group">
<input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
</div>
</div>
</div>
<div class="col-sm-12">
<button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
</div>
</form>
I tried excluded: [':disabled'], but it did not help and by jquery tried to reset and clear, but doesn not help

Add onchange inside your select and there you call your function to reset values of input fields.
Below is working code:
function resetFields() {
document.getElementById("voen").value = "";
document.getElementById("pinofsv").value ="";
}
<form name="form_fin" id="form_fin" action="" method="POST">
<div class="col-sm-12">
<div class="form-group" id="shexsdiv">
<label>Selectionn: </label>
<select onchange="resetFields()" class="form-control " name="shexsselect" id="shexsselect" required>
<option value='' selected disabled>Choose</option>
<option value='1'>First</option>
<option value='2'>Second</option>
</select>
</div>
</div>
<div class="col-sm-12" id="voendiv">
<div class="form-group">
<label>label2:</label>
<input type="text" class="form-control " name="voen" id="voen">
</div>
</div>
<div class="col-sm-12" id="fin_input">
<div class="form-group">
<label>Label2:</label>
<div class="input-group">
<input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
</div>
</div>
</div>
<div class="col-sm-12">
<button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
</div>
</form>
Read here more about onchange event

Related

How to validate form input with JavaScript

I have a form with more than 10 input/select options but i wish to show most of this form inputs when 4 of my fields specifically are filled.
I've done some research and found
$('input[type="text"]').each(function(){
// do my things here...
});
but this has 2 issues:
It doesn't work when i fill inputs
One of my fields is select option and here only tries to get inputs
Code
$(function() {
// show choices DIV only if all fields are filled.
$('input[type="text"]').each(function() {
if ($(this).val() != "") {
$('.choices').show();
} else {
$('.choices').hide();
}
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="POST">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="sm-form-design">
<input id="seq_no" type="text" class="form-control" name="seq_no" required>
<label for="seq_no" class="control-label">Seq No.</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<div class="sm-form-design">
<input id="question" type="text" class="form-control" name="question" required>
<label for="question" class="control-label">Question</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-form-design">
<select name="type" id="type" class="form-control">
<option value="dropdown">Dropdown</option>
<option value="multiple">Multiple</option>
<option value="radio">Radio Buttons</option>
<option value="input">Input</option>
</select>
<label for="type" class="control-label">Type</label>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="sm-form-design">
<input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
<label for="quiz_time" class="control-label">Time *</label>
</div>
</div>
</div>
</div>
<!-- show this part when all fields above are filled -->
<div class="row choices">
<div class="col-md-12">
<h5>Choices:</h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
Question
How can I validate all my first 4 fields before showing rest of the form?
Any idea?

While Shiladitya's answer works, and is closest to your own code, I find it cleaner to handle forms by serializing data into an object as input occurs. This allows you to more easily reason about validation, as you only have to validate an object, not DOM elements.
Here is a pared down example:
$(function() {
const formData = {}
const $form = $('#form-a')
const $partTwo = $('#part-2')
// some real validation here
const isValidPartOne = data =>
data.a && data.b && data.c
const showPartTwo = () => $partTwo.show()
$form.on('input', ({target}) => {
formData[target.name] = target.value
// form data is available at all times
console.log('formData =', formData)
if (isValidPartOne(formData)) {
showPartTwo()
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-a">
<div id="part-1">
PART 1
<input name="a" />
<input name="b" />
<select name="c">
<option value="" disabled selected>Choose One</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
<div id="part-2" style="display:none;">
PART 2
<input name="d" />
</div>
</form>

Here you go with a solution
$(function() {
$('.choices').hide();
// show choices DIV only if all fields are filled.
$('select').change(function() {
validateInput();
});
$('input[type="text"]').keyup(function() {
validateInput();
});
function validateInput() {
var valid = true;
$('input[type="text"], select').each(function() {
if ($(this).val() === "") {
valid = false;
}
});
if (valid) {
$('.choices').show();
} else {
$('.choices').hide();
}
}
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="POST">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="sm-form-design">
<input id="seq_no" type="text" class="form-control" name="seq_no" required>
<label for="seq_no" class="control-label">Seq No.</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<div class="sm-form-design">
<input id="question" type="text" class="form-control" name="question" required>
<label for="question" class="control-label">Question</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-form-design">
<select name="type" id="type" class="form-control">
<option value="dropdown">Dropdown</option>
<option value="multiple">Multiple</option>
<option value="radio">Radio Buttons</option>
<option value="input">Input</option>
</select>
<label for="type" class="control-label">Type</label>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="sm-form-design">
<input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
<label for="quiz_time" class="control-label">Time *</label>
</div>
</div>
</div>
</div>
<!-- show this part when all fields above are filled -->
<div class="row choices">
<div class="col-md-12">
<h5>Choices:</h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
OnChange of any input, please iterate through all the inputs just to check whether each input is empty or has value.
Here you go with a solution for your problem 1 that you mentioned in the comment box
$(function() {
$('.choices').hide();
// show choices DIV only if all fields are filled.
$('select').change(function() {
validateInput();
});
$('input[type="text"]').keyup(function() {
validateInput();
});
// --- Whenever you make an action you can call this method to validate your inputs ----
function validateInput() {
var valid = true;
$('input[type="text"], select').each(function() {
if ($(this).val() === "") {
valid = false;
}
});
if (valid) {
$('.choices').show();
} else {
$('.choices').hide();
}
}
});

I am not in a place to properly test but looking at your function I would make the following changes,
$(function() {
// show choices DIV only if all fields are filled.
var flag = false
$('input[type="text"]').each(function() {
if ($(this).val() != "") {
flag = true
} else {
flag = false
}
});
if (flag) {
$('.choices').show();
} else {
$('.choices').hide();
}
});
$('input[type="text"]').keyup(function() {
// call function
});
$('input[type="text"]').keydown(function() {
// call function
});

Bootstrap Validation Not Working when using Jquery

My Bootstrap validation works fine in form-control, see below image
My Code is:
<form role="form" data-toggle="validator" id="myform">
<div class="form-group">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Teacher" id="ddlMultiTeacher" style="background-color: white" required>
<%--<option value="">None</option>--%>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Subject" id="ddlMultiSubject" style="background-color: white" required>
</select>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Class" id="ddlMultiClass" style="background-color: white" required>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<select class="selectpicker" data-live-search="true" title="Select Section" id="ddlMultiSection" style="background-color: white" required>
</select>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-2">
<%-- <button id="btnSubmit2" class="btn btn-primary btn-block">Save</button>--%>
<input id="btnGenerateSchedule" class="btn btn-primary btn-block" type="submit" value="Save" />
</div>
</div>
</div>
</form>
but whenever I use my buttonsubmit code via jquery, my validation stops working.
$('#btnGenerateSchedule').click(function (e) {
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
//bootbox.alert({
// title: "Alert",
// message: "Your Schedule Has Been Generated !"
//})
} else {
//console.log("User declined dialog");
}
});
})
Can anyone tell me what I'm doing wrong? am I missing some plugins ?

When you write jquery submit or click event, then bootstrap or html validation does not work. If you want html/bootstrap validation should work before jquery click/submit event then do as follows:
$('#btnGenerateSchedule').click(function (e) {
if($("form")[0].checkValidity()){
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
} else {
//console.log("User declined dialog");
}
});
} });
$("form")[0]) depends on form in page. If it is first form in your page, then form[0], if it is second form in your page, then $("form")1) and so on.
For detail, you can visit link: html and jquery validation together

Try this,
$('form').on('click','#btnGenerateSchedule',function (e) {
debugger;
e.preventDefault();
bootbox.confirm("<b>Are you sure?</b>", function (result) {
if (result) {
GenerateSchedule();
//bootbox.alert({
// title: "Alert",
// message: "Your Schedule Has Been Generated !"
//})
} else {
//console.log("User declined dialog");
}
});
})

Dynamically add and remove form fields to be validated by Parsley.js

Here is my fiddle: My Fiddle (updated)
In my form (ID: #form), inputs fields are shown or hidden based on the selected option of a select input.
Each Input and its labels a wrapped in a div, which is hidden or shown based on the selected option. The attribute data-children of the select contains the information (in JSON Format) which inputs are to be shown when a certain option is selected.
I use the data-parsley-excluded attribute to remove the fields not visible from the parsley validation (Parsley Documentation).
Before I execute the parsley method $('#form').destroy();, at the end $('#form').parsley();
My HTML:
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<form id="form" method="post" accept-charset="UTF-8" class="form-horizontal" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="question_01" style="">Question 1</label>
<select class="form-control" name="question_01" id="question_01" required data-children="{"option_01":["input_01","input_02","input_03","input_04","input_05","input_06"],"option_02":["input_01","input_06","input_07","input_08","input_09","input_10"],"option_03":["input_02","input_04","input_05","input_07","input_09","input_10","input_11"]}">
<option value="" selected>Bitte auswählen</option>
<option value="option_01">Option 01</option>
<option value="option_02">Option 02</option>
<option value="option_03">Option 03</option>
</select>
</div>
<div id="div_input_01" class="form-group input-div hidden">
<label for="input_01" style="">Input 01</label>
<input type="text" class="form-control" name="input_01" id="input_01" required>
</div>
<div id="div_input_02" class="form-group input-div hidden">
<label for="input_02" style="">Input 02</label>
<input type="text" class="form-control" name="input_02" id="input_02" required>
</div>
<div id="div_input_03" class="form-group input-div hidden">
<label for="input_03" style="">Input 03</label>
<input type="text" class="form-control" name="input_03" id="input_03" required>
</div>
<div id="div_input_04" class="form-group input-div hidden">
<label for="input_04" style="">Input 04</label>
<input type="text" class="form-control" name="input_04" id="input_04" required>
</div>
<div id="div_input_05" class="form-group input-div hidden">
<label for="input_05" style="">Input 05</label>
<input type="text" class="form-control" name="input_05" id="input_05" required>
</div>
<div id="div_input_06" class="form-group input-div hidden">
<label for="input_06" style="">Input 06</label>
<input type="text" class="form-control" name="input_06" id="input_06" required>
</div>
<div id="div_input_07" class="form-group input-div hidden">
<label for="input_07" style="">Input 07</label>
<input type="text" class="form-control" name="input_07" id="input_07" required>
</div>
<div id="div_input_08" class="form-group input-div hidden">
<label for="input_08" style="">Input 08</label>
<input type="text" class="form-control" name="input_08" id="input_08" required>
</div>
<div id="div_input_09" class="form-group input-div hidden">
<label for="input_09" style="">Input 09</label>
<input type="text" class="form-control" name="input_09" id="input_09" required>
</div>
<div id="div_input_10" class="form-group input-div hidden">
<label for="input_10" style="">Input 10</label>
<input type="text" class="form-control" name="input_10" id="input_10" required>
</div>
<div id="div_input_11" class="form-group input-div hidden">
<label for="input_11" style="">Input 11</label>
<input type="text" class="form-control" name="input_11" id="input_11" required>
</div>
<button type="button" class="btn btn-info btn-block btn-submit-settings">Submit</button>
</form>
</div>
</div>
</div>
My Javascript:
$(document).ready(function() {
$('.btn-submit-settings').on('click', function(e) {
window.Parsley.on('field:error', function()
{
console.log('Validation failed for: ', this.$element);
});
$('#form').submit();
});
$('#form select').change(function() {
var $this = $(this);
if ($this.data('children')) {
$('#form').parsley().destroy();
// Hide all child elements
$.each($this.data('children'), function(value_id, input_id_array) {
$.each(input_id_array, function(key, input_id) {
if ($('#div_' + input_id).length ) {
$('#' + input_id).val(null);
if (!$('#div_' + input_id).hasClass('hidden')) {
$('#div_' + input_id).addClass('hidden');
}
}
});
});
// show the child elements of the selected option
if ($this.data('children')[$this.val()]) {
$.each($this.data('children')[$this.val()], function(key, input_id) {
if ($('#div_' + input_id).length )
{
if ($('#div_' + input_id).hasClass('hidden'))
{
$('#div_' + input_id).removeClass('hidden');
}
}
});
}
// For all inputs inside hidden div set attribute "data-parsley-excluded" = true
$('#form div.input-div.hidden').find(':input').each(function() {
var attr_data_parsley_excluded = $(this).attr('data-parsley-excluded');
if (typeof attr_data_parsley_excluded === typeof undefined || attr_data_parsley_excluded === false) {
$(this).attr('data-parsley-excluded', 'true');
}
});
// For all inputs inside not hidden div remove attribute "data-parsley-excluded"
$('#form div.input-div:not(.hidden)').find(':input').each(function() {
console.log(this.id);
$(this).removeAttr('data-parsley-excluded');
});
$('#form').find(':input').each(function() {
// Log shows that attribute is set right, seems to be ignored by parsley
console.log('ID: ' + this.id + ' TYPE: ' + $(this).prop('nodeName') + ': excluded=' + $(this).attr('data-parsley-excluded'));
});
$('#form').parsley();
$('#form').parsley().refresh();
}
});
});
I can't get it to work, even though the attributes seem to be set the right way.
The fields once hidden, stay out of the validation.

I guess you should add the attribute data-parsley-required="false" to exclude hidden fields from validation.
I mean, try to change
<input type="text" class="form-control" name="input_01" id="input_01" required>
to this
<input type="text" class="form-control" name="input_01" id="input_01" data-parsley-required="false">
and just change the attribute value if you want to validate it or not

This is more of a personal opinion than a factual answer, but I think you are attempting to solve the problem incorrectly. If I were doing this, I would create 2 parsley groups "shouldValidate" and "shouldNotValidate", and add your fields accordingly based on whether they are displayed or not. Then when you call validate, pass the group name "shouldValidate", and only that set of elements will be validated.

You probably need to call refresh on your parsley form after you modify excluded.

popover on empty inputs after clicking submit using javascript

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

How to validate a 12 digit phone Number using javascript and bootstrap3

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>

Develop Reference

JavaScript is the programming language of the Web.

Reset button and bootstrap validation on Option change in select - javascript

Related

How to validate form input with JavaScript

Bootstrap Validation Not Working when using Jquery

Dynamically add and remove form fields to be validated by Parsley.js

popover on empty inputs after clicking submit using javascript

How to validate a 12 digit phone Number using javascript and bootstrap3

Categories

Resources