I found this question being asked before and saw the recommendation was to add a method called alphanumeric. I tried adding this method, but the validation will still not accept phone numbers with dashes.
Does anyone see what I am doing wrong?
$('#phone').keyup(function() {
jQuery.validator.addMethod("alphanumeric", function(value, element) {
return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
}, "Numbers and dashes only");
});
$('#salesforce_submit').validate({
rules: {
phone: {
required: true,
//digits: true,
minlength: 10,
alphanumeric: true
}
},
messages: {
phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number with only numbers",
minlength: "Your number seems a bit short, doesn't it?"
}
},
submitHandler: function(form) {
event.preventDefault();
var datastring = $('#salesforce_submit').serialize();
$.ajax({
url: '/php/quoteSend.php',
type: 'POST',
data: datastring
,
success: function(data) {
console.log(data);
if (data == 'Error!') {
alert('Unable to submit form!');
} else {
}
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + '|' + errorThrown);
console.log('error');
}
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
<div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
<input type="Submit" Value="Submit">
</form>
You can use this code for allowing numbers and dashes
jQuery.validator.addMethod("numericdashe", function (value, element) {
console.log(value);
if (/^[0-9\-]+$/i.test(value)) {
return true;
} else {
return false;
};
}, "Numbers and dashes only");
add numericdashe role
phone: {
required: true,
//digits: true,
minlength: 10,
//alphanumeric: true
numericdashe: true
}
},
no need add jQuery.validator.addMethod inside keyup listener.
You have problem with your regex.
This regex works: /^[+][(]{0,1}[0-9]{1,3}[)]{0,1}[-\s./0-9]$/i
working fiddle
$('#phone').keyup(function() {
jQuery.validator.addMethod("alphanumeric", function(value, element) {
return this.optional(element) || /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/i.test(value);
}, "Numbers and dashes only");
});
$('#salesforce_submit').validate({
rules: {
phone: {
required: true,
//digits: true,
minlength: 10,
alphanumeric: true
}
},
messages: {
phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number with only numbers",
minlength: "Your number seems a bit short, doesn't it?"
}
},
submitHandler: function(form) {
event.preventDefault();
var datastring = $('#salesforce_submit').serialize();
$.ajax({
url: '/php/quoteSend.php',
type: 'POST',
data: datastring
,
success: function(data) {
console.log(data);
if (data == 'Error!') {
alert('Unable to submit form!');
} else {
}
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + '|' + errorThrown);
console.log('error');
}
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" method="POST" enctype="multipart/form-data">
<div><input id="phone" placeholder="Phone*" class="input block" maxlength="12" name="phone" type="phone"></div>
<input type="Submit" Value="Submit">
</form>
Related
Here I am using jQuery validation. It is working fine, after fill all form fields I want do Ajax call but I am not able to do that. I am getting error. How can I do?
jQuery(document).ready(function(){
jQuery("#SubmitForm").validate({
rules: {
"address": {
required: true
},
"username": {
required: true
},
"mobileNumber": {
required: true,
number: true,
minlength : 12
},
"userEmailid": {
required: true,
email: true
},
"message": {
required: true
}
},
messages: {
"address": {
required: "Please enter your Location."
},
"username": {
required: "Please enter your Fullname."
},
"mobileNumber": {
required: "Please enter your Mobile Number."
},
"userEmailid": {
required: "Please enter your Email.",
email: "Please enter valid Email."
},
"message": {
required: "Please enter Message."
}
},
/* jQuery.ajax({
type:'POST',
url :"php/submit_hitachiForm.php",
data: jQuery('form#SubmitForm').serialize(),
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
if(data == "success"){
$("#success_message").show();
$("#success_message").fadeOut(4000);
}
},
error:function(exception){
alert('Exeption:'+exception);
}
}); */
});
});
Put all the validation:
$('#SubmitForm).validate({
// validation rules
});
and after that initialize the validation function like:
if($('#SubmitForm).valid())
{
// make ajax() call here
}
Try this in your code
submitHandler: function() {
/*ajax request*/
}
I've tried a form validation using jquery.validate.min.js.
Error message will display on empty fields while clicking submit button.
And my problem is. I don't want that error message. Have to show red border of every empty field. Can't get idea about that.
thanks in advance
jQuery(".contact_form").validate({
rules: {
fname: {
required: true,
},
lname: {
required: true,
},
location: {
required: true,
},
phone: {
required: true,
},
mail: {
required: true,
mail: true
},
subjct: {
required: true,
},
message: {
required: true,
},
},
submitHandler: function (form) {
var postData = $(form).serializeArray();
var result = {};
$.each(postData, function () {
result[this.name] = this.value;
});
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="contact_form" method="post">
<div class="row">
<input type="text" class="f_name" name="fname" placeholder="First Name *">
<input type="text" class="l_name" name="lname" placeholder="Last Name">
</div>
<div class="row">
<input type="number" class="phone_number" name="phone" placeholder="Phone Number *">
<input type="email" class="mail_val" name="mail" placeholder="Email ID">
</div>
<div class="row">
<input type="text" placeholder="Subject *" name="subjct" class="subjct_content">
<textarea class="form_textarea" name="message" placeholder="Message *"></textarea>
<input type="submit" value="Submit">
</div>
</form>
To mark red to empty box you can add following to your validate function:
invalidHandler: function(form, validator) {
$('form input,textarea').each(function(){
if($(this).val() == ""){
$(this).css('border', '1px solid red');
}
});
},
errorPlacement: function(){
return false; // suppresses error message text
}
Try following
jQuery(".contact_form").validate({
rules: {
fname: {
required: true,
},
lname: {
required: true,
},
location: {
required: true,
},
phone: {
required: true,
},
mail: {
required: true,
mail: true
},
subjct: {
required: true,
},
message: {
required: true,
},
},
submitHandler: function (form) {
var postData = $(form).serializeArray();
var result = {};
$.each(postData, function () {
result[this.name] = this.value;
});
return false;
},
errorPlacement: function(error,element) {
return true;
}
});
OR you can simply set the error label/span to following style
display:none
I have the JQuery validations below that just ensure that something is written within the input fields, I also have maxlength in the html.
However, I was hoping someone could shed some light on the situation and inform me on how I can add some type of minlength to the jquery code below so I don't require to do any additional functions?
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
CheckUser(form);
return false;
}
});
Example HTML -
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>
You can use like below:
rules:{
txtusername: {
required: true,
minlength: 3
},
}
Why validation is not working in this script ?
I gave blank input but it is not giving the required messsage and also regx is not working.
$(document).ready(function(){
var $form = $(this);
$.validator.addMethod("regx", function(value, element, regexpr) {
return regexpr.test(value);
}, "Please enter a valid Pan number.");
$("#checkval").validate({ //here is form id #checkval
showErrors: function(errorMap, errorList) {
for (var error in errorMap) {
$.growl.error({ message: errorMap[error] });
}
},
onkeyup: false,
rules: {
oldemail: {
required: true,
regx: /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/
},
newemail: {
required: true,
regx: /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/
}
},
messages: {
oldemail: {
required: "Please enter old e-mail ",
regx: "Please enter your valid e-mail address"
},
newemail: {
required: "Please enter new e-mail ",
regx: "Please enter your valid e-mail address"
}
},
// From here started ajax code.
submitHandler: function(form) {
$.ajax({
url: index.php?act=account,
type: "POST",
data: $(form).serialize(),
success: function(response) {
alert(response);
$('#inquiryFormHolder').html("Your form was submitted!");
// here is div id #inquiryFormHolder
}
});
$form.submit();
}
});
});
Here is my code. My main problem is that var validationbool triggers success even if only one field of contact form is valid and it does not care if the other ones are invalid. How can I create better control that var validationbool = true only when all elements are valid.
$(document).ready(function () {
var validationBool = false;
$('#register-form').validate({
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10
},
country: {
required: true
},
boat: {
required: true
},
lat: {
required: true
},
registration: {
required: true
},
file: {
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
validationBool = false;
},
success: function (element) {
element.text('').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
validationBool = true;
}
});
$('#register-form').on('submit', function(e){
e.preventDefault();
if(validationBool){
var theData = {
name: $('#name').val(),
phone: $('#phone').val(),
email: $('#email').val(),
country: $('#country').val(),
lat: $('#lat').val(),
lng: $('#lng').val(),
boat: $('#boat').val(),
registration: $('#registration').val(),
file: $('#file').val()
};
$.ajax({ // ajax call starts
url: "functions/enroll.php",
type: 'post',
data: theData,
success: function(data)
{
swal("Your request has been recieved!", "We will contact you for confirmation soon", "success");
document.getElementById('name').value='',
document.getElementById('phone').value='',
document.getElementById('email').value='',
document.getElementById('country').value='',
document.getElementById('lat').value='',
document.getElementById('lng').value='',
document.getElementById('boat').value='',
document.getElementById('file').value='',
document.getElementById('registration').value='';
}
});
}
});
});
I would use the .valid() mehthod.
This would be printed like
var myForm = $("#register-form");
myForm.validate();
then, instead of using the "validationBool" variable, use
if (myForm.valid())
to check if the form is validated - this will check all fields.
Here is what I thought will work for you with validate():
[Note: This is just an example I used and you can use the similar approach - You don't have to explicitly use any boolean variable for knowing whether you can submit.
Do note, I used:
Invalidate Handler - Callback for custom code when an invalid form is submitted. Called with an event object as the first argument, and the validator as the second.
Submit Handler - Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.
Html code:
<form class="cmxform" id="commentForm" method="get" action="http://www.google.com">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" />
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" />
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
JS code:
$("#commentForm").validate({
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10
},
country: {
required: true
},
boat: {
required: true
},
lat: {
required: true
},
registration: {
required: true
},
file: {
required: true
}
},
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
/*Here you will get your errors
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}*/
alert(errors);
},
submitHandler: function (element) {
//Handler for submit action
//$(form).ajaxSubmit();
alert("submit");
}
});
JSFiddle Link here