I am trying to validate a form with the jQuery validation plugin. However, I am only getting the validation to work for 1 of the inputs. Any ideas?
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"> </script>
<form id="driver-form" class="form-horizontal driver" method="post">
<div class="form-group">
<label for="inputName1" class="col-md-2 col-md-offset-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverFirst" placeholder="First Name" required/>
</div>
</div>
<div class="form-group">
<label for="driverLast" class="col-md-2 col-md-offset-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverLast" placeholder="Last Name" required/>
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-md-2 col-md-offset-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="driverEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-group">
<label for="inputPhone1" class="col-md-2 col-md-offset-2 control-label">Phone Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverPhone" placeholder="Phone Number" required/>
</div>
</div>
</form>
javascript:
$("#driver-form").validate();
jsfiddle: http://jsfiddle.net/rynslmns/533Yt/
The validation framework used name attribute, you have not specified it
<input type="text" class="form-control" id="driverFirst" name="driverFirst" placeholder="First Name" required/>
Demo: Fiddle
Related
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.
This is the html for my page
<form id="sign-up">
<label class="col-lg-4 col-md-3">First Name</label>
<div class="col-lg-6 col-md-6">
<input type="" name="" class="form-control" id="first-name" required>
</div>
<div class="col-md-12 label-padding"></div>
<label class="col-lg-4 col-md-3">Last Name</label>
<div class="col-lg-6 col-md-6">
<input type="" name="" class="form-control" id="last-name" required>
</div>
<div class="col-md-12 label-padding"></div>
<label class="col-lg-4 col-md-3">Username</label>
<div class="col-lg-6 col-md-6">
<input type="" name="" class="form-control" id="username" required>
</div>
<div class="col-md-12 label-padding">
<span class="error-message username-exists hidden">Username Exists</span>
</div>
<label class="col-lg-4 col-md-3">Email</label>
<div class="col-lg-6 col-md-6">
<input type="email" name="" class="form-control" id="email" required>
</div>
<div class="col-md-12 label-padding">
<span class="error-message email-exists hidden">Email Exists</span>
</div>
<label class="col-lg-4 col-md-3">Password</label>
<div class="col-lg-6 col-md-6">
<input type="password" name="" class="form-control" id="pswd" placeholder="Minimum password length: 8 chars" required>
<p class="error-message hidden password-error">Password too short.</p>
</div>
<div class="col-md-12 label-padding"></div>
<label class="col-lg-4 col-md-3">Confirm Password</label>
<div class="col-lg-6 col-md-6 label-padding">
<input type="password" name="" class="form-control" id="pswd-2" placeholder="repeat password" required>
<p class="error-message hidden password-mismatch-error">Passwords don't match.</p>
</div>
it has a bug in firefox where I can't on the modal type into the password field. To show this issue well enough I recorded it so you can see on the form looping with tab skips the field (and I also can't click the field).
https://youtu.be/PyG1KM6_jzY
The problem is with Ubuntu 18.04 operating system you're using combined with Firefox.
The problem is solved if you install the available package by
https://bugzilla.mozilla.org/attachment.cgi?id=8974077
Here is the origin of the .deb
https://bugzilla.mozilla.org/show_bug.cgi?id=1405634
Hopefully, the bug will soon be fixed in Ubuntu, in the meantime, you can install the package fix.
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>
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
This is my input element. I want it to accept only letters (No numbers or any other characters).
<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control" id="firstName" placeholder="First Name" required>
This is my entire partial view.
<form method = "post" action = "" ng-controller = "signUpCtrl as signUp">
<div class="form-group row">
<label for="firstName" class="col-sm-2 form-control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group row">
<label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
</div>
</div>
<div class="form-group row">
<label for="userName" class="col-sm-2 form-control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="User Name" required>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 form-control-label">Email Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10 text-center">
<button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
</div>
</div>
</form>
I am using - Google Chrome 50.0.2661.94 (Official Build) m (32-bit)
Can you please try with the following(use this in the input element):
ng-pattern="/^[A-Za-z]+$/"
Use ^[a-zA-Z][^0-9]+$ or ^\w[^\d]+$ instead of [a-zA-Z].
Edit :
If you need to skip symbols also then use :
^[a-zA-Z][^0-9-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+$.
or
^[a-zA-Z][^0-9\W]+$ // this will skip all non-word characters.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class='container'>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" action="" ng-controller="signUpCtrl as signUp">
<div class="form-group row">
<label for="firstName" class="col-sm-2 form-control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="firstName" pattern="^[a-zA-Z][^0-9]+$" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group row">
<label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
</div>
</div>
<div class="form-group row">
<label for="userName" class="col-sm-2 form-control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="User Name" required>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 form-control-label">Email Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
</div>
</form>
</div>
</div>
</div>