I am using formvalidation.io but I cannot stop the form submitting on successful validation. It immediately submits request and refreshes page. I need to send form information via ajax.
I must be overlooking something obvious?
http://jsfiddle.net/k281at67/94/
The HTML:
<form method="post" id="estimateForm1" class="form-horizontal bv-form">
<input type="hidden" name="page_source" id="page_source" value=""/>
<fieldset>
<input type="hidden" name="RefferingPage" value="' . $page . '" />
<div class="form-group">
<div class="row">
<div class="col-md-8 pad_right">
<input type="text" class="form-control" name="Name" placeholder="*Your name" value="" />
</div>
</div><!--row-->
</div><!--form group-->
<div class="form-group">
<div class="row">
<div class="col-md-8 pad_right">
<input type="text" class="form-control" name="Phone" placeholder="*Phone" class="phone" value="111-111-1111" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8 pad_right">
<input type="text" name="Email" class="form-control" placeholder="*Email" id="" value="pie#aol.com"/>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-xs-2">
<button class="btn btn-default" type="submit" disabled="disabled">
<i class="fa fa-eye"></i>
Validate
</button>
</div>
</div>
</div>
</fieldset>
</form>
The Javascript
jQuery('#estimateForm1')
.formValidation({
framework: 'bootstrap',
err: {
container: 'tooltip'
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Name: {
row: '.col-md-8',
validators: {
notEmpty: {
message: 'The first name is required'
},
stringLength: {
min: 2,
message: 'Must be at-least 2 characters long.'
},
regexp:
{
message: 'Please only use A-Z characters.',
regexp: /^[a-zA-Z]+$/
}
}
},
Phone: {
row: '.col-md-8',
validators: {
notEmpty: {
message: 'The phone number is required'
},
stringLength: {
min: 14,
max: 15,
message: 'Not a valid phone #.'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
Email: {
row: '.col-md-8',
validators: {
notEmpty: {
message: 'The email address is required'
},
regexp: {
regexp: '^[^#\\s]+#([^#\\s]+\\.)+[^#\\s]+$',
message: 'The value is not a valid email address'
}
}
}
}
}).find('[name="Phone"]').mask('(000) 000-0000')
.on('success.field.fv', function(e, data) {
if (data.fv.getSubmitButton()) {
e.preventDefault();
//data.fv.disableSubmitButtons(true);
console.log('prevented submission');
}
}).on('success.form.bv',function(e)
{
e.preventDefault();
console.log('prevented submission');
});
You have a typo in your code:
This =>
.on("success.form.bv", function(e) { ...
should be =>
.on("success.form.fv", function(e) { ...
You have to trigger the event on the form instance, not the Phone field.
I suggest you to do the following:
jQuery('#estimateForm1')
.find('[name="Phone"]')
.mask('(000) 000-0000')
.end() // <=== DON'T FORGOT TO ADD THIS
.formValidation({
// ...
})
.on('success.field.fv', function(e, data) {
// ...
})
.on('success.form.fv',function(e) {
e.preventDefault();
console.log('prevented submission');
});
See Using Ajax to submit the form example.
Try this
.on('success.form.bv',function(e)
{
e.preventDefault();
return false;
console.log('prevented submission');
});
This function to stop call submit event. It should be calling manual
$(document).ready(function() {
$("#formname").submit(function(e) {
e.preventDefault();
});
});
Second option should be good for validation of form to client side. If you validate all value to return true then fire submit event other wise not fire.
function validation() {
return false;
});
But calling function on submit button like this
onclick="return validation()
Related
I'm trying to make a player registration form on our site for a sports tournament. I'm using bootstrap and jquery to validate the form but I can't seem to get the image uploading to server and move the file to the directory. It uploads the form data but not the image. Driving me nuts, done plenty of searches but no avail.
here is my jquery code and my html page.
Any help would be appreciated.
$(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'
},
submitHandler: function(validator, form, submitButton) {
$('#success_message').slideDown({
opacity: "show"
}, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
var bv = form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function(result) {
console.log(result);
}, 'json');
},
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'
}
}
}
}
})
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'>
</script>
<!-- Page Content -->
<div class="container">
<form class="well form-horizontal" action="UploadForm.php" method="post" id="contact_form" enctype="multipart/form-data">
<fieldset>
<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="firstname" placeholder="firstname" class="form-control" type="text">
</div>
</div>
</div>
<!-- more input vari -->
<div class="form-group">
<div class="col-md-4 selectContainer">
<input type="file" id="imgfile" name="player_image" onchange="readURL(this);" required>
</div>
<div class="col-md-4 selectContainer">
<img src="images/DefaultImage.png" width="200" height="200" alt="" />
<figcaption>Example</figcaption>
</div>
<div class="col-md-4 selectContainer">
<img id="blah" src="#" alt="your image will appear here" />
</div>
</div>
<div class="alert alert-success" role="alert" id="success_message">Success
<em class="glyphicon glyphicon-thumbs-up"></em> Thanks for contacting us, we will get back to you shortly.
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="reset" class="btn btn-default">Reset
<span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" name="submit" class="btn btn-success">
Send <span class="glyphicon glyphicon-send">
</span>
</button>
</div>
</div>
</fieldset>
</form>
<script>
$(document).ready(function() {
$('#idfundtransferownaccounts').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'tACNumber',
message: 'Please select a different account number'
}
}
},
tACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'fACNumber',
message: 'Please select a different account number'
}
}
},
amountValue: {
validators: {
notEmpty: {
message: 'please enter a amount'
}
}
},
fACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
},
tACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
}
}
});
});
</script>
this is the form validation i have made using bootstrap validator.
<form class="form-horizontal" class="form-inline" name="fundtransferownaccounts" id="idfundtransferownaccounts" method="post" action="FundTransferToOwnAccounts" style="margin-left: px;margin-right: 5px;">
<div class="form-group">
<label class="control-label col-sm-3">From Account Number*</label>
<div class="col-sm-6">
<div class="btn-group div-inline">
<c:set var="accounts" scope="session" value="${accounts}"/>
<c:set var="accountslist" value="${accounts.getAccountlist()}"/>
<select name="fACNumber" id="faccountnumber" class="form-control" >
<option selected disabled>Select Account Number</option>
<c:forEach var="num" begin="0" end="${accountslist.size()-1}">
<c:set var="accNum" value="${accountslist.get(num).getAccountno()}"/>
<option value="${accNum}"><c:out value="${accNum}"/></option>
</c:forEach>
</select>
</div>
<input type="checkbox" id="getfaccountbalance" onclick="getfAccountBalance(document.getElementById('faccountnumber').value, this)"> View Account Balance
<label id="faccountbalance" style="color: blue" ></label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">To Account Number*</label>
<div class="col-sm-6">
<div class="btn-group" >
<c:set var="accounts" scope="session" value="${accounts}"/>
<c:set var="accountslist" value="${accounts.getAccountlist()}"/>
<select name="tACNumber" id="taccountnumber" class="form-control" >
<option selected disabled>Select Account Number</option>
<c:forEach var="num" begin="0" end="${accountslist.size()-1}">
<c:set var="accNum" value="${accountslist.get(num).getAccountno()}"/>
<option value="${accNum}"><c:out value="${accNum}"/></option>
</c:forEach>
</select>
</div>
<input type="checkbox" id="gettaccountbalance" onclick="gettAccountBalance(document.getElementById('taccountnumber').value, this)"> View Account Balance
<label id="taccountbalance" style="color: blue"> </label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Transfer Amount*</label>
<div class="col-sm-6">
<input name="amountValue" id="transferamount" type="text" class="input-sm" maxLength="11" onkeyup="$(this).val(validcurrencyinput($(this).val()))" placeholder="0 . 00">
<div class="form-group div-inline">
<select name="currencyType" id="currencytype" class="form-control" style="margin-left: 15px;font-size: 10px;">
<option>LKR</option>
<option>USD</option>
<option>EURO</option>
<option>DINAR</option>
</select>
</div>
<div class="space"></div>
<label id="amountvalue" style="color: blue"> </label>
<label style="color:#017ebc; font-size: 11px;font-weight: bold;">Note: To transfer ten either enter 10 or 10.00</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">From Account Narration*</label>
<div class="col-sm-6">
<input name="fACNarration" type="text" class = "form-control input-sm">
<div class="space"></div>
<label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">To Account Narration*</label>
<div class="col-sm-6">
<input name="tACNarration" type="text" class = "form-control input-sm">
<div class="space"></div>
<label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-primary" onClick="this.form.reset();">Reset</button>
</div>
</div>
</form>
this is the form
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Your Transaction</h4>
</div>
<div class="modal-body">
<p>Are You Sure to Proceed the Transaction</p>
</div>
<div class="modal-footer">
<button type="button" id="submit" class="btn btn-primary" data-dismiss="modal" onclick="submitform()">Proceed</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
this is the bootstrap modal i have implemented.
now i want to pop up this modal and then send data to a servlet file.
but in here the data is passed to servlet file after the button submission.
i found the answer guys.
we have to write some code in bootstrap validation onSuccess.
here is the modified code.
$(document).click(function() {
//$("#confirmownaccountsdiv").hide();
$('#idfundtransferownaccounts').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'tACNumber',
message: 'Please select a different account number'
}
}
},
tACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'fACNumber',
message: 'Please select a different account number'
}
}
},
amountValue: {
validators: {
notEmpty: {
message: 'please enter a amount'
}
}
},
fACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
},
tACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
}
},
onSuccess:(function(e, data) {
e.preventDefault();
$('.modal').appendTo("body").modal('show');
})
});
});
thanks for the comments guys.
With the button:
<button type="submit" class="btn btn-primary">Submit</button>
Remove the attribute type="submit" from the button.
The attribute type="submit" automatically submits your form.
<button onclick="showpopup()" class="btn btn-primary">Submit</button>
<script>
function showpopup() {
$('#myModal').show();
}
</script>
(OR)
<button id="showpopup" class="btn btn-primary">Submit</button>
<script>
$("#showpopup").click(function(event){
event.preventDefault();
$('#myModal').show();
});
</script>
I think you need to attach an onsubmit event handler to the form and call preventDefault on the event, in order to stop the regular submit. Then in that handler, do what you want, and then submit.
Here i found the answer.Thanks for your reply guys.
$(document).click(function() {
$('#idfundtransferownaccounts').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'tACNumber',
message: 'Please select a different account number'
}
}
},
tACNumber: {
validators: {
notEmpty: {
message: 'please select a account number'
},
different: {
field: 'fACNumber',
message: 'Please select a different account number'
}
}
},
amountValue: {
validators: {
notEmpty: {
message: 'please enter a amount'
}
}
},
fACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
},
tACNarration: {
validators: {
notEmpty: {
message: 'please fill the above field'
}
}
}
},
onSuccess: (function(e, data) {
e.preventDefault();
$('.modal').appendTo("body").modal('show');
})
});
});
I wanted to use BootstrapValidator to validate couple of fields and enable stripe button upon validation. The problem is that the button is enabled once any of the fields are validated. I am trying to enabled the stripe button once both fields are validated.(ignore the datepicker field). below is my javascript code.
$('#myform')
.bootstrapValidator({
message: 'This value is not valid',
//live: 'submitted',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fname: {
message: 'The first name is not valid',
validators: {
notEmpty: {
message: 'The first name is required and can\'t be empty'
},
stringLength: {
min: 2,
max: 30,
message: 'The first name must be more than 6 and less than 30 characters long'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'The first name can only consist of alphabetical letters'
}
}
},
lname: {
message: 'The last name is not valid',
validators: {
notEmpty: {
message: 'The last name is required and can\'t be empty'
},
stringLength: {
min: 3,
max: 30,
message: 'The last name must be more than 6 and less than 30 characters long'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'The last name can only consist of alphabetical letters'
}
}
},
}
})
.on('success.form.fv', function(e) {
// Prevent submit form
e.preventDefault();
var $form = $(e.target),
validator = $form.data('bootstrapValidator');
$form.find('#result').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('fname').val()).show();
});
$('.stripe-button-el').attr("disabled", true );
});
And this is the form:
<form id="myform" method="post" class="form-horizontal">
<div class="form-group" >
<label class="col-sm-3 control-label">Full name</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="fname" placeholder="First name" id="fname" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="lname" placeholder="Last name" id="lname" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Pick a Date</label>
<div class="col-sm-4">
<input class="form-control" name="date" type="text" id="datepicker"/>
</div>
<div class="col-sm-4">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<?php echo $stripe['publishable_key']; ?>"
data-amount="5000" data-zip-code = "true" data-description="Whatever">
</script>
</div>
</div>
<div class="form-group" >
<label class="col-sm-4 control-label" id='results'></label>
</div>
</form>
You need an event triggered with every keystroke to determine whether the form is valid. Once you know its valid, you can take action on the button. BootstrapValidator's API includes everything you need to do this (other than capturing the event itself).
You can append this on method to your $('#myform') chain:
.on('keyup', function() {
// Get your form's validator
var validator = $('#myform').data('bootstrapValidator');
// Validate the form
validator.validate();
// Check if the form is valid
if (validator.isValid()) {
// Perform action on Stripe button
}
});
I have a small registration form and I try to submit this form using submitHandler of bootstrap but it gave me a Uncaught TypeError: Cannot read property 'attr' of null.
I use this code to validate and submit :
$(document).ready(function(){
//To validate the registration form and save its value after validation
$('#registerForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
},
submitHandler: function(form) { // <- only fires when form is valid
$.ajax({
type: 'POST',
url: 'include-ajax/check_and_save_registration_form.php',
data: $(form).serialize(),
success: function() {
$(form).fadeOut(500, function(){
$(form).html("USER DONE!").fadeIn();
});
}
}); // <- end '.ajax()'
return false; // <- block default form action
}
}
});
});
Why do I get that error ? When I remove the submitHandler I do not get that error but I need it to store form data in my database.
The data validated correctly but not submitted.
I used also submitHandler: function(validator, form, submitButton).
Still giving the same error.
How to submit the form without getting error?
my for html :
<div class="pages_container">
<form id="registerForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-6">
<input class="form-control" name="email" type="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-6">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Retype password</label>
<div class="col-lg-6">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<div class="col-lg-6 col-lg-offset-3">
<button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
</div>
</div>
</form>
</div>
Please see this page for the proper way to submit a form via ajax: Using Ajax to Submit the Form
$(document).ready(function() {
$(form)
.bootstrapValidator({
... options ...
})
.on('success.form.bv', function(e) {
// 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) {
// ... Process the result ...
}, 'json');
});
});
I have this form to register my users in my website:
<div class="pages_container">
<form id="registerForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-3">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-6">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Retype password</label>
<div class="col-lg-6">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-6">
<input class="form-control" name="email" type="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="phone" />
</div>
</div>
<div class="form-group">
<div class="col-lg-6 col-lg-offset-3">
<button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
</div>
</div>
</form>
</div>
and I use this JQuery to validate the form and then submit it to a PHP Page to be stored in MySQL Database :
$(document).ready(function(){
//To validate the registration form and save its value after validation
$('#registerForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
},
stringLength: {
min: 2,
message: 'The first name must be at least 2 characters long'
},
regexp: {
regexp: /^[a-z\s]+$/i,
message: 'The first name can consist of alphabetical characters and spaces only'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
},
stringLength: {
min: 2,
message: 'The last name must be at least 2 characters long'
},
regexp: {
regexp: /^[a-z\s]+$/i,
message: 'The last name can consist of alphabetical characters and spaces only'
}
}
},
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The username can only consist of alphabetical and number'
},
different: {
field: 'password',
message: 'The username and password cannot be the same as each other'
},
remote: {
message: 'The username is not available',
url: 'include-ajax/username_or_email_availablitiy.php',
data: {
type: 'username'
}
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
},
stringLength: {
min: 8,
message: 'The password must have at least 8 characters'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
},
stringLength: {
min: 8,
message: 'The password must have at least 8 characters'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
},
remote: {
message: 'The email is not available',
url: 'include-ajax/username_or_email_availablitiy.php',
data: {
type: 'email'
}
}
}
},
phone: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
digits: {
message: 'The phone number can contain digits only'
},
stringLength: {
min: 11,
max: 11,
message: 'The phone number must be 11 digits'
}
}
},
submitHandler: function(form) { // <- only fires when form is valid
$.ajax({
type: 'POST',
url: 'include-ajax/check_and_save_registration_form.php',
data: $(form).serialize(),
success: function() {alert('test');
$(form).fadeOut(500, function(){
$(form).html("USER DONE!").fadeIn();
});
}
}); // <- end '.ajax()'
return false; // <- block default form action
}
}
});
});
The validation process is working perfectly but the problem is after clicking the submit button I get a javascript error in my console Uncaught TypeError: Cannot read property 'attr' of null and this error is pointing to bootstrapValidator.min.js:12 .
To be honest this is my first bootstrap code so I do not understand the submitHandler so much .
What is the arg form where did we get it should we pass this instead ?
and what is the reason of that error did the script see the form or not ?