I am trying to validate my signup form using php and ajax. But i am not getting any value in return. This is my ajax code.
<script type="text/JavaScript">
function frmValidation(str)
{
if (str=="")
{
document.getElementById("txtError").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtError").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","validation.php?value="+str,true);
xmlhttp.send();
}
}
And my php file named as validation.php is
<?php
$value= $_REQUEST["value"];
$pass= $_REQUEST["value"];
$error="";
if($value=="")
{
echo "This is a mandatory field";
}
elseif($value=="fname")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct First Name";
}
}
elseif($value=="lname")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct Last Name";
}
}
elseif($value=="designation")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct designation";
}
}
elseif($value=="suburb")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct suburb";
}
}
elseif($value=="city")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct city name";
}
}
elseif($value=="state")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct state";
}
}
elseif($value=="country")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct country";
}
}
elseif($value=="pincode")
{
if(!preg_match("/^[a-zA-Z0-9 ]*$/", $value))
{
echo "Please enter the correct designation";
}
}
elseif($value=="mobile")
{
if(!preg_match("/^[\+0-9\-\(\)\s]*$/", $value))
{
echo "Please enter the correct designation";
}
}
elseif($value=="email")
{
if(!preg_match("/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/", $value))
{
echo "Please enter the correct email format";
}
}
elseif($value=="cpass")
{
if($pass==$value)
{
echo "Confirm password is wrong";
}
}
?>
The HTML form is this
<div class="col-lg-12">
<div class="container">
<h1>Sign Up form</h1>
<form role="form" action="signup.php" method="post">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading"> General Information </div>
<div class="panel-body">
<div class="col-sm-6">
<div class="form-group">
<label for="First Name">First Name</label>
<input type="text" class="form-control" onblur="frmValidation(this.value)" tabindex="1" id="First Name" placeholder="First Name" name="fname"><span id="txtError" style="color: red"></span>
</div>
<div class="form-group">
<label for="Company Name">Company Name</label>
<input type="text" tabindex="3" class="form-control" id="Company Name" placeholder="Company Name" name="cname">
</div>
<div class="form-group">
<label for="Address">Address</label>
<input type="text" tabindex="5" class="form-control" id="address" placeholder="Address" name="address">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" tabindex="7" class="form-control" id="City" placeholder="City" name="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" tabindex="9" class="form-control" id="country" placeholder="Country" name="country">
</div>
<div class="form-group">
<label for="mobile">Mobile No.</label>
<input type="text" tabindex="11" class="form-control" id="suburb" placeholder="Mobile No." name="mobile">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="Last Name">Last Name</label>
<input type="text" tabindex="2" class="form-control" id="Last Name" placeholder="Last Name" name="lname">
</div>
<div class="form-group">
<label for="Designation">Designation</label>
<input type="text" tabindex="4" class="form-control" id="Designation" placeholder="Designation" name="designation">
</div>
<div class="form-group">
<label for="suburb">Suburb</label>
<input type="text" tabindex="6" class="form-control" id="suburb" placeholder="Suburb" name="suburb">
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" tabindex="8" class="form-control" id="state" placeholder="State" name="state">
</div>
<div class="form-group">
<label for="pincode">Pincode</label>
<input type="text" tabindex="10" class="form-control" id="pincode" placeholder="Pincode" name="pincode">
</div>
<div class="form-group">
<label for="dob">Date Of Birth</label>
<input type="text" tabindex="12" class="form-control" id="dob" placeholder="Date of Birth" name="dob">
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"> Login Details </div>
<div class="panel-body">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" tabindex="13" class="form-control" id="email" placeholder="Email Address" name="email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" tabindex="14" class="form-control" id="password" placeholder="Password" name="pass">
</div>
<div class="form-group">
<label for="Confirm password">Confirm Password</label>
<input type="password" tabindex="14" class="form-control" id="confirm password" placeholder="Confirm Password" name="cpass">
</div>
</div>
</div>
<div class="form-group">
<input type="submit" tabindex="15" class="form-control btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
In html form i am trying to get value for at least first field just to check for weather it is working or not. But i am getting no value in return. Please let me know where is the problem as i am new to use ajax.
Please help! thank you!
Your formatting is incorrect, which hides a bug in your code: you tell the computer "when the AJAX response is received, then send the AJAX request". Of course, unless you send the request first, there won't be any response to react to.
This is your code, corrected:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtError").innerHTML=xmlhttp.responseText;
}
// we're still in the "onreadystatechange" function here!
// xmlhttp.open("GET","validation.php?value="+str,true);
// xmlhttp.send();
}
// send the request from *here*
xmlhttp.open("GET","validation.php?value="+str,true);
xmlhttp.send();
Related
I am trying to figure out how to check if all 4 inputs are filled out then checkmark the contact information check box. If any are not filled out uncheck the checkbox.
Any help with this would be greatly appreciated.
$(document).on('change', '#ContactName, #ContactEmail, #ContactPhone', function() {
if ('#ContactName, #ContactEmail, #ContactPhone' === '') {
$("#contactinformation").prop("checked", false);
} else {
$("#contactinformation").prop("checked", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" />
Contact information
</div>
</div>
</div>
Answer updated to reflect new requirement that BusinessName be optional.
See the comments inline:
// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
let count = 0; // Keep track of how many are filled in
// Loop over all the text fields
$('.form-control:not("#BusinessName")').each(function(idx, el){
// If the field is not empty....
if(el.value !== ""){
count++; // Increase the count
}
});
// Test to see if all 3 are filled in
if(count === 3){
$("#contactinformation").prop("checked", true); // Check the box
} else {
$("#contactinformation").prop("checked", false); // Unheck the box
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" disabled />
Contact information
</div>
</div>
</div>
Please try with below code snippet.
<input type="text" class="form-control input-sm InputText" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
$( document ).ready(function() {
$(".InputText").change(function(){
var checkCheckBox= true;
$(".InputText").each(function() {
if ($.trim($(this).val()) != '') {
checkCheckBox = false;
}
});
if (checkCheckBox == true)
{
$("#contactinformation").prop("checked",true);
}
else
{
$("#contactinformation").prop("checked",false);
}
});
});
Add "InputText" class in textbox, if you want to validate this thing.
Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>
Im trying to create my register page that posting the data to PHP File using Ajax and then the PHP file Check the Error of the form and return some error
My Form
<head>
<script type="text/javascript" src="assets/extra/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var fname=$('#firstname').val();
var lname=$('#lastname').val();
var displayname=$('#displayname').val();
var password=$('#password').val();
var cpassword=$('#cpassword').val();
var email=$('#email').val();
var terms=$('#terms').val();
$.ajax({
type: "POST",
url: "register.php",
data: "firstname="+fname+"&lastname="+lname+"&displayname="+displayname+"&password="+password+"&cpassword="+cpassword+"&email="+email+"&term="+terms ,
success: function(html){
$("#load").css('display','block');
$("#signupform").css('display','none');
$("#box").css('display','none');
$("#loading").fadeOut('500', function(){
$("#loading").css('display','none');
$("#box").html(html).show('slow');
});
}
});
return false;
});
});
</script>
</head>
<style type="text/css">
#loading
{
display:none;
width:500px;
height:500px;
background:url(img/loading.gif) no-repeat;
}
</style>
</head>
<div id="loading" style="">
</div>
<div id="box">
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">Fistname</label>
<div class="col-md-9">
<input type="text" name="firstname" id="firstname" class="form-control inp" placeholder="Fistname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Lastname</label>
<div class="col-md-9">
<input type="text" name="lastname" id="lastname" class="form-control inp" placeholder="Lastname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Displayname</label>
<div class="col-md-9">
<input type="text" name="displayname" id="displayname" class="form-control inp" placeholder="Displayname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="email" name="email" id="email" class="form-control inp" value="" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" name="password" id="password" class="form-control inp" value="" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" name="cpassword" id="cpassword" class="form-control inp" value="" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<label><input type="checkbox" name="terms" id="terms" value="yes" checked> Accept Term</label><div id="err_terms" class="err"></div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="submit" class="btn btn-info signup-bt" id="submit" name="submit">   <i class="fa fa-user-plus"></i> Register</button>
</div>
</div>
</form>
And Here it's My PHP
if(isset($_POST['fistname']) && isset($_POST['lastname']) && isset($_POST['email']) && isset($_POST['displayname'])) {
$fname = mysql_real_escape_string($_POST['firstname']);
$lname = mysql_real_escape_string($_POST['lastname']);
$email = mysql_real_escape_string($_POST['email']);
$password = mysql_real_escape_string($_POST['password']);
$cpassword = mysql_real_escape_string($_POST['cpassword']);
$displayname = mysql_real_escape_string($_POST['displayname']);
$checkemail = mysql_query("SELECT `email` FROM `users` WHERE email='$email'");
$checkname = mysql_query("SELECT `displayname` FROM `users` WHERE displayname='$displayname'");
if(mysql_num_rows($checkemail) != 0){
echo '<span class="message error">Something</span>';
}
if(mysql_num_rows($checkname) != 0){
echo '<span class="message error">Something</span>';
}
if($terms!="yes"){
echo '<span class="message error">Something</span>';
}
if($password!=$cpassword){
echo '<span class="message error">Something</span>';
}
if($displayname==""){
echo '<span class="message error">Something</span>';
}
if($password==""){
echo '<span class="message error">Something</span>';
}
if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
echo '<span class="message error">Something</span>';
}
if($terms != "yes"){
echo '<span class="message error">Something</span>';
}
else{
// QUERY
}
}
When I click Submit, And I try to check HTTP Header, It's doesnt send data to register.php
So.. How can I fix it?
Thank you
The browser is, for lack of better description, "confused" change your button type from submit to button so it wont' try to submit:
<button id="btn-signup" type="button" class="btn btn-info signup-bt" id="submit" name="submit">   <i class="fa fa-user-plus"></i> Register</button>
You should be passing an object and not a string for post ajax:
$.ajax({
type: "POST",
url: "register.php",
data: {
"firstname": fname,
"lastname": lname,
"displayname": displayname,
"password": password,
"cpassword": cpassword,
"email": email,
"term": terms
},
success: function(html){ /* you success function here*/
});
You have a typo here:
if(isset($_POST['fistname']) && ...
Should be 'firstname'.
My script doesnt work though the database insertion is working. The message "successfully inserted" is on the saveclient.php page not on the index.html.
my script (member_script.js)- i put this on folder named js.
$("#clientSubmit").click( function () {
$.POST( $("#saveClient").attr("action"), $("#saveClient :input").serializeArray(), function(info) { $("#result").html(info); } );
clearInput();
});
$("#saveClient").submit( function() {
return false;
});
function clearInput() {
$("#saveClient :input").each ( function () {
$(this).val('');
});
}
my html
<form id="saveClient" action="saveclient.php" method="POST" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" name="name" id="name" required data-validation-required-message="Please enter your name.">
<input type="text" class="form-control" name="date" id="date" value="November 1, 2015">
<input type="text" class="form-control" name="time" id="time" value="9:20 pm">
<input type="text" class="form-control" name="memberid" id="memberid" value="10002">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Address</label>
<input type="text" class="form-control" placeholder="Complete Address" name="address" id="address" required data-validation-required-message="Please enter your complete address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone / Cellphone Number</label>
<input type="text" class="form-control" placeholder="Phone / Cellphone Number" name="number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Worked / Source of Income</label>
<input type="text" class="form-control" placeholder="Worked / Source of Income" name="work" id="work" required data-validation-required-message="Please enter your type of worked.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<span id="result"></span>
<div class="row">
<div class="form-group col-xs-12">
<button class="btn btn-success btn-md" id="clientSubmit" >Save</button>
</div>
</div>
</form>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery-1.8.3.min.js"</script>
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<script src="js/member_script.js"></script>
my database query (saveclient.php) - is working, it save data to database
<?php
include_once('getconnect.php');
$clientid = $_POST['memberid'];
$name = $_POST['name'];
$address = $_POST['address'];
$number = $_POST['number'];
$work = $_POST['work'];
$date = $_POST['date'];
$time = $_POST['time'];
if (mysql_query("INSERT INTO member VALUES ('', '$clientid','$name','$address','$number','$work','$date','$time')"))
echo "Successfully Inserted!";
else
echo "Insertion Failed";
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form=$("#saveClient");
$("#clientSubmit").click(function(){
$.ajax({
type:"POST",
url:form.attr("action"),
data:form.serialize(),
success: function(response){
console.log(response);
}
});
});
});
</script>
Use this code, this will work perfectly.
I have a form that its fields expand in different tabs. I am using bootsrap framework and bootstrapValidator to validate forms. But the problem is that when I am processing fields in first tab form fields at this tab validate normally. If all fields are correct and I press submit, form gets submited no matter if all other fields are not valid.Why is that?
<form action="" id="register-form" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="gGhsyEKjycBXKMoMMl9tFdOOF6ISez0t">
<div class="container bg-white">
<div class="tab-content">
<div class="tab-pane fade in active" id="client-details">
<div class="margin-20"></div>
<fieldset>
<legend>Personal Data</legend>
<span class="help-inline">This are your billing data</span>
<div class="margin-20"></div>
<div class="form-group">
<label for="id_client-first_name">First name:</label>
<input class="form-control input-sm" id="id_client-first_name" maxlength="40" name="client-first_name" type="text">
</div>
<div class="form-group">
<label for="id_client-middle_name">Middle name:</label>
<input class="form-control input-sm" id="id_client-middle_name" maxlength="40" name="client-middle_name" type="text">
</div>
<div class="form-group">
<label for="id_client-last_name">Last name:</label>
<input class="form-control input-sm" id="id_client-last_name" maxlength="40" name="client-last_name" type="text">
</div>
<div class="form-group">
<label for="id_client-adress">Adress:</label>
<input class="form-control input-sm" id="id_client-adress" maxlength="40" name="client-adress" type="text">
</div>
<div class="form-group">
<label for="id_client-email">Email:</label>
<input class="form-control input-sm" id="id_client-email" maxlength="75" name="client-email" type="email">
</div>
<div class="form-group">
<label for="id_client-phone_no">Phone no:</label>
<input class="form-control input-sm" id="id_client-phone_no" maxlength="20" name="client-phone_no" type="text">
</div>
<div class="form-group">
<label for="id_client-mobile">Mobile:</label>
<input class="form-control input-sm" id="id_client-mobile" maxlength="20" name="client-mobile" type="text">
</div>
<div class="form-group">
<label for="id_client-no_of_doctors">No of doctors:</label>
<input class="form-control input-sm" id="id_client-no_of_doctors" name="client-no_of_doctors" type="number">
</div>
</fieldset>
</div>
<div class="tab-pane fade" id="user-data">
<div class="margin-20"></div>
<fieldset>
<legend>User details</legend>
<span class="help-block">Please provide with username and password</span>
<div class="margin-20"></div>
<div class="form-group">
<label for="id_user_data-first_name">First name:</label>
<input class="form-control input-sm" id="id_user_data-first_name" maxlength="30" name="user_data-first_name" type="text">
</div>
<div class="form-group">
<label for="id_user_data-last_name">Last name:</label>
<input class="form-control input-sm" id="id_user_data-last_name" maxlength="30" name="user_data-last_name" type="text">
</div>
<div class="form-group">
<label for="id_user_data-username">Username:</label>
<input class="form-control input-sm" id="id_user_data-username" maxlength="30" name="user_data-username" type="text">
</div>
<div class="form-group">
<label for="id_user_data-email">Email address:</label>
<input class="form-control input-sm" id="id_user_data-email" maxlength="254" name="user_data-email" type="text">
</div>
<div class="form-group">
<label for="id_user_data-password1">Password:</label>
<input class="form-control input-sm" id="id_user_data-password1" name="user_data-password1" type="password">
</div>
<div class="form-group">
<label for="id_user_data-password2">Password confirmation:</label>
<input class="form-control input-sm" id="id_user_data-password2" name="user_data-password2" type="password">
</div>
</fieldset>
</div>
<div class="tab-pane fade" id="practice-details">
<div class="margin-20"></div>
<fieldset>
<legend>Practice Details</legend>
<span class="help-block">Please provide details of your practice</span>
<span class="help-block">If you don't provide we will use your client details.</span>
<div class="form-group">
<label for="id_practice_data-name">Name:</label>
<input class="form-control input-sm" id="id_practice_data-name" maxlength="50" name="practice_data-name" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-address">Address:</label>
<input class="form-control input-sm" id="id_practice_data-address" maxlength="50" name="practice_data-address" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-postal_code">Postal code:</label>
<input class="form-control input-sm" id="id_practice_data-postal_code" maxlength="10" name="practice_data-postal_code" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-phone_no">Phone no:</label>
<input class="form-control input-sm" id="id_practice_data-phone_no" maxlength="10" name="practice_data-phone_no" type="text">
</div>
<div class="form-group">
<label for="id_practice_data-city">City:</label>
<input class="form-control input-sm" id="id_practice_data-city" maxlength="10" name="practice_data-city" type="text">
</div>
</fieldset>
</div>
</div>
<input type="submit" id="btn-register" name="register" class="btn btn-default btn-sm">
<div class="margin-20"></div>
</div>
</form>
and bootstrapValidator js
$("#register-form").bootstrapValidator({
fields:{
"client-first_name":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-last_name":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-phone_no":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-adress":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-mobile_no":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-no_of_doctors":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"client-email": {
validators: {
remote:{
url:"url_to_check_availability",
message: "This email already exists",
type:"GET"
},
notEmpty:{
message: "This field is required"
}
}
},
"user_data-username": {
validators: {
remote: {
url: "url_to_check_availability",
message: "This username already exists",
type: "GET"
},
notEmpty: {
message: "This field is required"
}
}
},
"user_data-password1":{
validators:{
notEmpty:{
message:"This field is required"
}
}
},
"user_data-password2":{
validators:{
identical:{
field:"user_data-password1",
message:"Passwords do not match"
}
}
},
"practice_data-logo":{
validators:{
}
}
}
}).on('success.form.bv', function(e){
e.preventDefault();
var form = $(e.target);
console.log(form.serialize());
$.ajax({
timeout:15000,
url:"/order/",
type: 'post',
dataType:"json",
data:form.serialize(),
success:function(data, status, jqXHR){
console.log(data);
alert("saved successfully");
parent.location.replace('/crm/accounts/login/');
},
error:function(jqXHR, status, message){
if (status == "timeout"){
alert("The server took more time to respond");
alert(message);
}
else{
alert("Status: "+status+" Message: "+message);
}
}
});
});
Shouldn't validate the form on submit? How can I solve this? Any ideas?
Didn't understand the negative point on my question but either ways I am going to answer it.
In order to bypass this, I added
excluded:":disabled"
on my validatorPlugin options, because, of tabs hiding content. Now it works like a charm.