I'm trying to validate a contact form using this code. But I could not get appropriate validations for phone number,zip code and message.
$(function() {
$("form[name='contact']").validate({
rules: {
username: "required",
email: {
required: true,
email: true
},
phno:"required",
zipcode: {
required:true,
zipcode:true
},
msg:"required"
},
messages: {
username: "Please enter your username",
email: "Please enter a valid email address",
phno:"Please enter phone number",
zipcode:"Please enter zip code",
msg:"Please enter message"
},
submitHandler: function(form) {
form.submit();
}
});
});
As mentioned in jquery validation plugin library use phoneUS and zipcodeUS instead of phno and zipcode.
Related
jQuery chosen select validation messages are not disappearing until the form submit. I applied required validation if I submit the form without choosing the value error message is displaying. But after I choose it is not disappearing as normal select boxes, it is staying until the form submit.
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" });
$("#postJob").validate({
rules: {
skills:{
required:true,
},
});
please provide a running code snippets to understand the problem more easily.
jQuery validate messages are disappeared once the validation is fulfilled.
$(document).ready(function () {
$("#form").validate({
rules: {
"name": {
required: true,
minlength: 5
},
"email": {
required: true,
email: true
}
},
messages: {
"name": {
required: "Please, enter a name"
},
"email": {
required: "Please, enter an email",
email: "Email is invalid"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
Here is the fiddle:
http://jsfiddle.net/amwmedia/sw87W/
I have used jquery validation. My js code is like this in register.php file.
It works fine and validation is done. But when I place this code in separate file 'something.js' and include this in script tag but it does not work.
<script>
$(function()
{
$("#form1").validate(
{
rules:
{
user:
{
required: true
},
email:
{
required: true,
email: true
}
},
messages:
{
user:
{
required: " Please enter your name"
},
email:
{
required: " Please enter your email address.",
email: "Please enter valid email address"
}
}
});
});
</script>
I am trying to use jquery validation to unhide a paypal button when the form is valid. I am using the valid() method as shown below. The problem is, that as soon as one key is pressed in any of the form elements, all of the errors show. How can I check if it's valid without firing all of errors?
$('#jValidate').validate({
rules:{
username:{
required:true,
minlength:6
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:8
},
confirm:{
required:true,
equalTo:"#password"
}
},
messages:{
username:{
required:"Username is required",
minLength:"Username must be at least 6 characters"
},
password:{
required:"Password is required",
minLength:"Password must be at least 8 characters"
},
confirm:{
required:"You must confirm your password",
equalTo:"Password Confirmation does not match"
}
}
});
$('#jValidate .form-control').keyup(function(){
if($('#jValidate').valid()){
$('#signup').show();
$('#disabled').hide();
}
});
var validator = $('#jValidate').validate({...rules, options});
validator.checkForm() // true if valid, false if not.
Hello i have a form that i want to run through form validation and then submit. How can i check if the following function returns true to know that everything has been validated and then submitted?
I created a fiddle to test
http://jsfiddle.net/WHGq2/
MODIFIED CODE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
equired: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
}
})
$('#form').submit(function(e){
// Stop the form actually posting
e.preventDefault();
// I want to be able to do the check here if the form has passed validation
if( $(this).valid() ) {
// Stop the form actually posting
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
</script>
You can call the valid() method of jquery validation. Like
if($('#form').valid())
Actually you can declare the validate function when the html page is loaded and just check whether it's valid or not at the time of submit
$(document).ready(function(){
$('#form').validate(rules...messages...);
In case of rules & messages use:-
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
phone: true }
},
messages: {
name: { required : "Please let us know who you are."},
email: {required : "A valid email will help us get in touch with you.",email : "A valid email will help us get in touch with you."},
phone: {required:"Please provide a valid phone number.",phone:"Please provide a valid phone number."}
}
It's a good practice and in case of phone numbers, you've misspelled required
$('#form').submit(function(evt) {
evt.preventDefault();
.....
if( $('#form').valid() ) {
//submit the form via ajax
} else {
//show errors
}
});
});
And I think you know than you've to add the name attribute of each input field:-
<input type="text" name="email" />
Please note that required in the phone rule was written equired and could have caused most of your issues. See the demo included.
$(function() {
$('#form').validate(.......);
$('#form').submit(function(e) {
e.preventDefault();
.....
if( $(this).valid() ) {
//submit the form via ajax or otherwise
} else {
//report errors
}
});
});
JSFIDDLE DEMO
You can use valid method of the plugin, something like following.
$('#form').validate({...});
if ($('#form').valid()) {
// do your thing
}
here is the documentation http://jqueryvalidation.org/valid
Updated your code, added submitHandler ,Callback for handling the actual submit when the form is valid.
<script type="text/javascript">
$(function(){
$('#form').submit(function(e){
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
equired: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
},
submitHandler: function() {
// Stop the form actually posting
e.preventDefault();
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
});
</script>
Here is the jQuery code
$("#register-form").submit(function (e) {
e.preventDefault();
}).validate({
rules: {
name: "required",
address: "required",
phone: "required",
landmark: "required",
pincode: "required",
city: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your name",
address: "Please enter your address",
phone: "Please enter your phone",
landmark: "Please enter your landmark",
pincode: "Please enter your pincode",
city: "Please enter your city",
email: "Please enter a valid email address"
},
submitHandler: function (form) {
//form.submit();
//alert("Do some stuff...");
$("#step1").hide();
//$('#step1img').css('opacity','0.5');
//$('#step2img').css('opacity','1');
$("#step2").show();
//submit via ajax
return false;
}
});
// });
$("#back").click(function () {
$("#step1").show();
$("#step2").hide();
});
function submitform() {
document.getElementById('#register-form').submit();
}
this is my fiddle , http://jsfiddle.net/bd4T2/ i have tried multipage form , using jquery validation js , but form is not submitting
okay, I copied the code out of the fiddle (which wasn't working and did not include the jquery library) and i found the error in the submitform function, you've got a hash in front of the form id when using the dom to find the form:
function submitform() {
document.getElementById('#register-form').submit(); //<-- '#register-form'
}
//this is not going to work, you were looking to use jquery here
document.getElementById('#register-form').submit();
will not work, because there's no # in the form id, so it should read like this;
function submitform() {
$('#register-form').submit();
}