On my login view. I am using bootstrap validator https://github.com/nghuuphuoc/bootstrapvalidator/tree/v0.5.2. For the php side of thing I use codeigniter MVC framework 3.0.3
I have to input fields called username and password and one hidden input field called user_info.
With bootstrap validator what I am tring to do is validate multple input fields as one.
But keep on getting this fire bug error below
Image
Here is my login form
<?php echo $header;?>
<?php echo form_open_multipart('admin/common/login', array('id' => 'login-form','role' => 'form'));?>
<div class="row" id="login-panel">
<div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title"><?php echo $heading_title;?></h1>
</div>
<div class="panel-body">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
<input type="text" name="username" class="form-control" value="" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-lock"></i></span>
<input type="password" name="password" class="form-control" value="" placeholder="Password">
</div>
</div>
<input type="hidden" name="user_info" />
</div><!-- . panel-body -->
<div class="panel-footer">
<div class="text-right">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div><!-- . panel-footer -->
</div><!-- . panel panel-default -->
</div>
</div><!-- # login-panel -->
<?php echo form_close();?>
<script type="text/javascript">
$(document).ready(function() {
$('#login-form')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
user_info: {
excluded: false,
validators: {
notEmpty: {
message: 'Please fill out each field'
}
}
}
}
})
.on('keyup', 'input[name="username"], input[name="password"]', function(e) {
var y = $('#login-form').find('[name="username"]').val(),
m = $('#login-form').find('[name="password"]').val(),
// Set the user_info field value
$('#login-form').find('[name="user_info"]').val(y === '' || m === '' ? '' : [y, m].join('.'));
// Revalidate it
$('#login-form').bootstrapValidator('revalidateField', 'user_info');
});
});
</script>
<?php echo $footer;?>
Question: How can I make bootstrap validator validate multiple input fields as one correctly?
Keep a ; instead of , here:
m = $('#login-form').find('[name="password"]').val(),
Script:
$(document).ready(function() {
$('#login-form')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
user_info: {
excluded: false,
validators: {
notEmpty: {
message: 'Please fill out each field'
}
}
}
}
})
.on('keyup', 'input[name="username"], input[name="password"]', function(e) {
var y = $('#login-form').find('[name="username"]').val(),
m = $('#login-form').find('[name="password"]').val(); //<= keep ; here
// Set the user_info field value
$('#login-form').find('[name="user_info"]').val(y === '' || m === '' ? '' : [y, m].join('.'));
// Revalidate it
$('#login-form').bootstrapValidator('revalidateField', 'user_info');
});
});
Here is what I get in their website . It uses the concept of adding a hidden field and combining data into the hidden field. Then we can validate the new hidden field like regular field.
Hope this helps.
Related
I have a form and the default is readonly for each input. Try to remove readonly attribute when input doesn't qualify the bootstrap validator.
Is there any way to check form with bootstrap validator without submit the button? like checking inside document ready?
How to remove readonly attribute when it doesn't qualify bootstrap validator checking?
<div class="content">
<div class="col-md-12 bg boxCover" >
<div class="row">
<div class="col-md-12 col-sm-12">
<div class ="form-group">
<label for="nama">Nama Lengkap<span class="text-danger">*</span></label>
<input type="text" id="customerName" readonly name="customerName" value="<?php echo $customerName?>" required class="form-control clean">
</div>
</div>
</div>
</div>
</div>
JS
$('#formInput').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
customerName: {
validators: {
regexp: {
regexp: "^[A-Za-z., ]+$",
}
}
}
}
});
I've one text area for multiple email input and I want to validate emails with the bootstrap validator. I can't do this because there is an option for multiple which is by default false and I cannot make it true.
For your Reference (bootstrap validator page): http://bootstrapvalidator.votintsev.ru/validators/emailAddress/
<div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
<textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'Email is required and cannot be empty'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
}
});
</script>
From the link you provided:
When setting options via HTML attributes, remember to enable the validator by setting data-bv-emailaddress="true".
You don't need to do that when using HTML 5 type="email" attribute.
Just add those attributes to your textarea:
data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"
Test it out:
$(document).ready(function() {
$('#emailForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'Email is required and cannot be empty'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
</head>
<body>
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-4 control-label"><span class="required">*</span> Email</label>
<div class="col-sm-8">
<textarea id="company_email" name="email" class="form-control pull-left" rows="2" placeholder="Email" data-bv-emailaddress-multiple="true" data-bv-emailaddress="true"></textarea>
</div>
</form>
</body>
</html>
Add the tag multiple, like <input type="email" multiple>
See https://www.stefanjudis.com/today-i-learned/email-inputs-can-accept-multiple-email-addresses/
This worked for me to allow comma separated email addresses when using Bootstrap validation.
I have an update form,that i call inside a modal on my main page,(with an onclick event,the click triggers a call with xmlhttprequest for the edit page containing the form with the stored data values). The thing is,everything works fines,the update works,post works,retrieving data in the first place works,except for the form validation,and ajax use to post the data. Please notice that on my main page,i have a create call,that creates a new instance,and it works just fine,with the form validation and the ajax post,so it can't be some required jQuery or any other script.
This is my form:
<form id="eventFormUpdate" method="POST" class="form-horizontal" action="Event/{{$event->id}}/Update">
<input type="hidden" name="_method" value="PATCH" id="hidden-update">
<div class="form-group">
<label class="col-xs-3 control-label">Nom</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="nameUpdate" value="{{$event->name}}"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date de début</label>
<div class="col-xs-5 dateContainer">
<div class="input-group input-append date" id="startDatePickerUpdate">
<input type="text" class="form-control" name="starting_dateUpdate" value="{{$event->starting_date}}"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date de fin</label>
<div class="col-xs-5 dateContainer">
<div class="input-group input-append date" id="endDatePickerUpdate">
<input type="text" class="form-control" name="ending_dateUpdate" value="{{$event->ending_date}}"/>
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Assigné à</label>
<div class="col-xs-5 selectContainer">
<select name="assigned_toUpdate" class="form-control">
<option value="4" selected >First</option> <!--fix this by checking if is the selected data or not-->
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-5">
<textarea id="descUpdate" class="form-control" name="descriptionUpdate" placeholder="Veuillez entrer une description">{{$event->description}}</textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default" id="update-event-submit">valider</button>
</div>
</div>
</form>
And here is my script that handles the form validation and the ajax posting
<!-- event update script -->
<script>
$(document).ready(function() {
$('#startDatePickerUpdate')
.datepicker({
format: 'yyyy/mm/dd'
})
.on('changeDate', function(e) {
// Revalidate the start date field
$('#eventFormUpdate').formValidation('revalidateField', 'starting_dateUpdate');
});
$('#endDatePickerUpdate')
.datepicker({
format: 'yyyy/mm/dd'
})
.on('changeDate', function(e) {
$('#eventFormUpdate').formValidation('revalidateField', 'ending_dateUpdate');
})
.find('[name="assigned_toUpdate"]')
.selectpicker()
.change(function(e) {
/* Revalidate the pick when it is changed */
$('#eventFormUpdate').formValidation('revalidateField', 'assigned_toUpdate');
})
.end();
$('#eventFormUpdate')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
nameUpdate: {
validators: {
notEmpty: {
message: 'Le nom est obligatoire.'
}
}
},
starting_dateUpdate: {
validators: {
notEmpty: {
message: 'La date de début est obligatoire.'
},
date: {
format: 'YYYY/MM/DD',
min: new Date(new Date().setDate(new Date().getDate()-1)),
max: 'ending_date',
message: 'La date de début est non valide.'
}
}
},
ending_dateUpdate: {
validators: {
notEmpty: {
message: 'La date est oligatoire.'
},
date: {
format: 'YYYY/MM/DD',
min: 'starting_date',
message: 'La date de fin est non valide.'
}
}
},
descriptionUpdate: {
validators: {
notEmpty: {
message: 'La description est obligatoire.'
}
}
},
assigned_toUpdate: {
validators: {
notEmpty: {
message: 'Veuillez séléctionner un utilisateur.'
}
}
}
}
})
.on('success.field.fv', function(e, data) {
if (data.field === 'starting_dateUpdate' && !data.fv.isValidField('ending_dateUpdate')) {
// We need to revalidate the end date
data.fv.revalidateField('ending_dateUpdate');
}
if (data.field === 'ending_dateUpdate' && !data.fv.isValidField('starting_dateUpdate')) {
// We need to revalidate the start date
data.fv.revalidateField('starting_dateUpdate');
}
})
.submit(function(){
return false;
})
.submit(function(){
console.log('gonnastartsub');
var $form = $("#eventFormUpdate"),
url = $form.attr('action');
console.log('got vars');
$.post(url, $form.serialize()).done(function () {
console.log('am in');
$("#modal-closeUpdate").click();
console.log('posted');
});
});
});
$("#descUpdate")
.focus(function() {
if (this.value === this.defaultValue) {
this.value = '';
}
})
.blur(function() {
if (this.value === '') {
this.value = this.defaultValue;
}
});
Update
This is my controller
public function update(Request $request,$id)
{
$event = event::find($id);
$event->name = $request->name;
$event->description = $request->description;
$event->starting_date = $request->starting_date;
$event->ending_date = $request->ending_date;
$event->assigned_to = $request->assigned_to;
$event->save();
}
And this My routes call:
Route::patch('Event/{eventID}/Update', 'EventsController#update');
One last thing,at first the script was on my main page,and it didn't work so i tried to put it in in the called page with xmlhttprequest,and still doesn't work.
The only thing i can think of is,when i call the new page(the form to edit and update data) the script is already loaded in the main page,so it doesn't find the ids of the elements to handle,that's why it does not work,or at least this is the only reason i could find .
Any suggestions please?
Well first of all you have an error in your datepickers min and max,they don't match the field names you have set,set them to this
max: 'ending_dateUpdate'
min: 'starting_dateUpdate'
Second,the field names in your form,don't match those on your controller page,so it can't really update if it can't find the data,this should be your controller page:
public function update(Request $request,$id)
{
$event = event::find($id);
$event->name = $request->nameUpdate;
$event->description = $request->descriptionUpdate;
$event->starting_date = $request->starting_dateUpdate;
$event->ending_date = $request->ending_dateUpdate;
$event->assigned_to = $request->assigned_toUpdate;
$event->save();
}
Hope it helps .
<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 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');
});
});