Disable 'Continue' button - javascript

So I have the following fields, basically to create an account. This is just for a prototype. I was wondering how to disable the continue button and only enable the button once all fields have been completed. I have seen this can be done using jQuery and forms, but as this isn't really a form it doesn't work correctly. I understand it may be easier using but I have to use all of the fields there as they are shown. So basically is there a way for it work with only using what I already have?
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*: </label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
</form>
</div>
<input type="submit" id="continue" value="Continue" disabled="disabled" a href="address.html"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>

You may not have nested forms.
Once fixed, you can just check if the fields are empty or not after an input changes.
$('#continue').click(function(e){
e.preventDefault();
if(checkFields())
$('#form1').find('form').submit();
return false;
});
function checkFields() {
$('#form1 input').each(function(){
if($(this).val() == '')
return false;
else
return true;
});
}

Related

Custom Bootstrap validation on form element

I am collecting an ABN (Australian Business Number) on a registration form. I have written some javascript that does validation based on the ABN validation rule here:
function validateABN (abnNumber) {
var weights = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
var result = false;
if (abnNumber.length === 11) {
var sum = 0;
var weight;
for (var index = 0; index <= weights.length - 1; index++) {
weight = weights[index];
digit = abnNumber[index] - (index ? 0 : 1);
sum += weight * digit;
}
result = sum % 89 === 0;
}
return result;
}
console.log(validateABN('43154365778'));
The form field name is: CompanyABNACN
It is a bootstrap form. I'm a little familiar with bootstrap but not to the point where I can add custom form field validation on a form element. I want an error message to be displayed "Invalid ABN format" if the javascript validation fails.
I have searched google and within the stack overflow forums and have not been able to find an example similar to mine or I have found really complicated examples I'm not able to understand.
Would someone please explain to me how to incorporate this custom function into validation on my registration form please.
<div class="account-hold my-account register">
<div class="container">
<div class="row mt-30">
<div class="col-sm-12">
<h1 class="my-account-label">Create Account</h1><hr class="ghr">
</div>
<div class="col-sm-6 pull-right">
<img src="assets/images/content-images/register/image.jpg" class="img-responsive" alt="" />
</div>
<div class="col-sm-6">
<p class="my-account-label-p mb-30">Already have an account? Click here to sign in or complete the form below to create a new account</p>
<form name="registrationform" id="registration-form" action="/registration/" method="post" class="form-horizontal validate-form" role="form">
<input type="hidden" name="page" value="register" />
<input type="hidden" name="redirect" value="/content/thank-you-registration/" />
<input type="hidden" id="validated" value="f" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">First Name:</label>
<div class="col-lg-8 col-md-8">
<input name="firstname" type="text" id="firstname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Last Name :</label>
<div class="col-lg-8 col-md-8">
<input name="lastname" type="text" id="lastname" placeholder="" class="form-control required" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Email Address :</label>
<div class="col-lg-8 col-md-8">
<input name="email" type="email" id="registration-email" placeholder="" class="form-control required email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">ABN :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" />
<div class="form-control hidden invalid-feedback">Please provide a valid ABN.</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Company :</label>
<div class="col-lg-8 col-md-8">
<input name="CompanyName" type="text" id="CompanyName" placeholder="" class="form-control required company" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Phone Number :</label>
<div class="col-lg-8 col-md-8">
<input name="PhoneNumber" type="text" id="PhoneNumber" placeholder="" class="form-control phone-number" />
</div>
</div>
<input name="birthday" type="hidden" id="birthday" class="form-control" placeholder="" />
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Capricorn Member Number:</label>
<div class="col-lg-8 col-md-8">
<input name="capicorn_number" type="text" id="capicorn_number" class="form-control" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Street Address :</label>
<div class="col-lg-8 col-md-8">
<input name="streetaddress" type="text" id="street-address" placeholder="" class="form-control street-address required auto-streetaddress" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Suburb / City :</label>
<div class="col-lg-8 col-md-8">
<input name="suburb" type="text" id="suburb" placeholder="" class="form-control city required auto-suburb" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">State :</label>
<div class="col-lg-8 col-md-8">
<select name="state" class="form-control required auto-state" id="state">
<option value="">Please Select</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT ">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA ">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC">Victoria</option>
<option value="WA ">Western Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Country : </label>
<div class="col-lg-8 col-md-8">
<select name="country" id="Country" class="form-control clone required auto-country" data-native-menu="false" data-rel="country-field">
<option value="">Please Select</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Post Code : </label>
<div class="col-lg-8 col-md-8">
<input name="postcode" type="text" id="postcode" class="form-control required auto-postcode" placeholder="" />
</div>
</div>
<!---
<input type="hidden" name="password">
<input type="hidden" name="password2">
--->
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Account Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" name="password" id="password" class="form-control required" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label my_acct_lbl">Confirm Password :</label>
<div class="col-lg-8 col-md-8">
<input type="password" class="form-control required" id="password2" name="password2" data-rel="password" placeholder="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-4 col-md-4 control-label label">Newsletter: </label>
<div class="col-lg-8 col-md-8">
<input type="checkbox" name="newsletter1" id="newsletter1" value="1" checked="true">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-4 col-lg-3 col-md-offset-4 col-md-3 text-left">
<input name="submitbutton" id="submit-button" type="submit" value="Register" class="btn partwise-btn btn-block text-uppercase" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
You didn't specify when the validation should occur, e.g. as the user is entering the ABN number or when they submit the form. Assuming the former, you can do the following:
Add an 'input' event listener to the ABN input field so that it validates every time the user enters something in that field:
<input name="CompanyABNACN" type="text" id="CompanyABNACN" placeholder="" class="form-control required is-invalid" oninput="do_validate();" />
(You can also use jQuery to add an event listener rather than doing it inline as in my example above.)
Your validation function should look something like this:
function do_validate() {
if ( validateABN( $('input#CompanyABNACN').val() ) ) {
$( '.invalid-feedback' ).hide();
$('input#CompanyABNACN').removeClass( 'is-invalid' )
} else {
$( '.invalid-feedback' ).show();
$('input#CompanyABNACN').addClass( 'is-invalid' )
}
}
You need to add "is-invalid" class to the input to invalidate for ABN via javascript.
<div class="col-md-3 mb-3">
<label for="ABNnumber">Zip</label>
<input type="text" class="form-control" id="ABNnumber" name="ABNnumber" required>
<div class="invalid-feedback">
Please provide a valid ABN.
</div>
</div>
Your javascript should be sth like this
$("form#abnFormSubmit").on("submit", function(e){
e.preventdefault;
var isAbnValid = validateABN($("#ABNnumber").val());
if(!isAbnValid){
$("#ABNnumber").addClass("is-invalid");
}
else{
$("#ABNnumber").removeClass("is-invalid");
}
})

Why the form is not setting after using parsley().reset(); and still showing validators

I am Using ParsleyJs to validate below shown form, I have been trying to reset the form by calling Reset() function on click of Reset button and i have validated the form using isValid() on form submission and not from the data-parsley-validate in form. After using (#formid).parsley().reset(); in Reset() function the form resets all it's fields but still shows the validator saying "this field is required", i have not found any soution in ParsleyJs documentation.
<form id="Person" class="form-horizontal form-label-left">
<div>
<input id="id" type="hidden" name="id">
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="firstname">
First Name
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" id="firstname" data-parsley-pattern="[a-zA-Z]{3,30}" name="name" class="form-control" data-parsley-trigger="focusout" required>
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="lastname">
Last Name
</label>
<div class="col-md-6 col-sm-6">
<input type="text" id="lastname" data-parsley-pattern="[a-zA-Z]{3,30}" name="name" required data-parsley-trigger="focusout" class="form-control" />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="phone">
Phone
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" type="tel" id="phone" name="phone" required="required" data-parsley-pattern="^\d{10}$" data-parsley-maxlength="10" data-parsley-trigger="focusout" />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="taddress">
Address
</label>
<div class="col-md-6 col-sm-6 ">
<textarea class="form-control" id="address" name="address" rows="3" data-parsley-trigger="focusout" required></textarea>
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="dob">
Date of Birth
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" id="dob" type="date" name="date" data-parsley-trigger="focusout" min="1900-01-01" max="2020-01-30" pattern="\d{4}-\d{2}-\d{2}" required />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">
Email
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" id="email" name="email" required type="email" data-parsley-trigger="focusout" />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="ssn">
SSN
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" pattern="^\d{9}$" id="ssn" type="number" name="ssn" required data-parsley-maxlength="9" data-parsley-trigger="focusout" />
</div>
</div>
<div class="">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="Reset()" data-dismiss="modal">Close</button>
<br />
<button class="btn btn-primary" id="btnReset" onclick="Reset()">Reset</button>
<br />
<button type="submit" id="btnSubmit" value="validate" class="btn btn-success">Submit</button>
</div>
</div>
</form>
Below shown is the Reset function
function Reset() {
$("#Person")[0].reset();
$('#Person').parsley().reset();
}
Your button is a submit button! So it validates again your form after the reset...
To make it not a submit button use <button type="button" ...>.
Alternatively you could return false in your onclick, or change it to a <div>, or put it outside the form.

JQuery $('form').serialize() produces empty results

fiddle: http://jsfiddle.net/a3f6ouqw/2/
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
Javascript code
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
and I'm always getting empty str. Any ideas?
add name in input and select
For a form element's value to be included in the serialized string, the element must have a name attribute.
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="email" type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input name="password" type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input name="dateControl" type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select name="selectpicker" class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input name="checkbox" type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
The issue is because none of your input elements, ie. the input, select, textarea etc., have name attributes.
These are required to make the HTML valid, and are also what the serialize() method uses as the keys to associate the values to.
Add name attributes on the HTML fields and your JS code will work fine.

Validation error An invalid form control with name='' is not focusable

I had a html form with set of input fields for each of which I am giving required="true" for validation. But when I click on submit after entering the mandatory fields it is give an error:
An invalid form control with name='' is not focusable
I know if we use novalidate to the form I wont get that error, but my validation wont work. How can I make my validation work without error?
<form name="customerForm" class="form-horizontal" id="custForm">
<fieldset>
<div class="form-group">
<label for="customerName" class="col-lg-4 col-lg-offset-1 control-label">Name</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerName" placeholder="Enter customer name" type="text" required="true" value = "{{customerName}}">
</div>
</div>
<div class="form-group">
<label for="postCode" class="col-lg-4 col-lg-offset-1 control-label">Post code</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.postcode" placeholder="Enter post code" type="text" value = "{{postCode}}">
</div>
<div class="col-lg-2">
<button type="next" class="btn btn-primary" ng-click="$ctrl.findAddress()">Find address</button>
</div>
</div>
<div class="form-group">
<label for="selectAddress" class="col-lg-4 col-lg-offset-1 control-label">Select address</label>
<div class="col-lg-4">
<select class="form-control" id="selectAddress" ng-model="$ctrl.quote.newClient.customerAddress" ng-change="$ctrl.populateAddressFields()">
<option ng-repeat="address in addresses"
value="{{address}}" >{{address}}</option>
</select>
</div>
</div>
<div class="form-group ng-hide">
<label for="textArea" class="col-lg-4 col-lg-offset-1 control-label">Address</label>
<div class="col-lg-4">
<textarea ng-model="$ctrl.quote.newClient.customerAddress" class="form-control" rows="3" required="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="address1" class="col-lg-4 col-lg-offset-1 control-label">Address 1</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine1" placeholder="Enter Address 1" type="text" required="true" value = "{{addressLine1}}">
</div>
</div>
<div class="form-group">
<label for="address2" class="col-lg-4 col-lg-offset-1 control-label">Address 2</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine2" placeholder="Enter Address 2" type="text" required="true" value = "{{addressLine2}}">
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required="true" value = "{{emailId}}">
</div>
</div>
<div class="form-group">
<label for="customerMobile" class="col-lg-4 col-lg-offset-1 control-label">Mobile number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerMobile" placeholder="Enter customer mobile number" type="text" required="true">
</div>
</div>
<div class="form-group" ng-show="$root.customerDetails.tradeType.description == 'Limited Company'">
<label for="inputCompanyRegistrationNumber" class="col-lg-4 col-lg-offset-1 control-label">Company registration number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.companyRegNo" placeholder="Enter company registration number" type="text" required="true">
</div>
</div>
</fieldset>
</form>
And Iam using $valid to validate the form
<div class="col-lg-1">
<button form="custForm" type="submit" class="btn btn-primary right-button" ng-click="customerForm.$valid && $ctrl.proceedToPaymentDetails()">Next</button>
</div>

data submitted into database if the informations are invalid using jquery,Ajax

I am new to Jquery and ajax.I want to check if mail id is already exist in database. So I use Ajax to check email is exist or not. I check this condition during submitting a form, so I use onSubmit event.
when I enter submit button the above condition is checked and then inserted into database.but If condition fails that email also inserted into database.
what is the error? I cannot find this error please help me!
my html code is:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form class="form-horizontal" method="post" action = "" onSubmit=" return checkmail();">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
my Jquery function is
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
return true;
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
</script>
check.php
<?php
$con = new mysqli('localhost','root','','registration'); //set coonection to db
$mail = $_POST['emailid'];
$query = mysqli_query($con, "select email from user where email='".$mail."' ");
if(mysqli_num_rows($query) > 0)
{
echo '1'; // if mail exist
}
?>
thank you in advance.
You should do something like this:
<form class="form-horizontal" method="post" action = "" onSubmit="checkmail()">
And put the script right after body tag starts.
I will recommend you to do this from jquery
$("#form-id").on('submit',function(e){
e.preventDefault();
// Validation for data
});
use below code with few modification.
The HTML
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form id="myForm" class="form-horizontal" method="post" action="">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" onClick="checkmail();" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
JQuery Code
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
$("#myForm").submit();
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
Change the id of form accordingly, which kept as myForm

Categories

Resources