Refael
asked on
Ajax form and jQuery validation
Hello Experts,
Below are two blocks of code:
The first block of code is basically a jQuery form validation.
The second block of code is a code that should process only once the validation has passed successfully.
I am not an expert... what i am trying to understand is where to insert the the second block of code.
I am thinking that this should be in the submit click function yet it needs to check first if the validations has passed meaning there is no errors. Thank you for you help!
Below are two blocks of code:
The first block of code is basically a jQuery form validation.
The second block of code is a code that should process only once the validation has passed successfully.
I am not an expert... what i am trying to understand is where to insert the the second block of code.
I am thinking that this should be in the submit click function yet it needs to check first if the validations has passed meaning there is no errors. Thank you for you help!
var form = $('#vContact');
var formMessages = $('#form-messages');
var requiredInput = $("#vContact input[inputRequired]");
var validEmail = new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
var validateRequired = function(evt) {
$(requiredInput).each(function() {
if (($.trim($(this).val() )=== "") || ($.trim($(this).val()).length <= 2)) {
$(this).addClass("error");
evt.preventDefault();
} else {
$(this).removeClass("error");
}
});
};
var validateEmail = function(evt) {
if($(this).val().match(validEmail)) {
$(this).removeClass("error");
} else {
$(this).addClass("error");
evt.preventDefault();
}
};
$(requiredInput).blur(validateRequired);
$("#email").blur(validateEmail);
$("#submit").click(function(evt) {
validateRequired.call($(requiredInput),evt);
validateEmail.call($('#email'),evt);
});
});
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$(formMessages).text(response);
$('#name').val('');
$('#email').val('');
$('#phone').val('');
})
ASKER
Hello Julian :-)
Thank you. Can I do it like this?
Thank you. Can I do it like this?
$("#submit").click(function(evt) {
if (validateRequired.call($(requiredInput),evt) && validateEmail.call($('#email'),evt)) {
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$(formMessages).text(response);
$('#name').val('');
$('#email').val('');
$('#phone').val('');
})
} else {
evt.preventDefault();
}
});
Yes - but I wouldn't - it is not good design.
Keep your validation routines doing what they do - checking input. They return values which are then used to decide whether you should fire the AJAX or not.
Keep your validation routines doing what they do - checking input. They return values which are then used to decide whether you should fire the AJAX or not.
ASKER
Julian so i should use the "return false" as you did? Is that what you are saying?
$("#submit").click(function(evt) {
if (validateRequired.call($(requiredInput),evt) && validateEmail.call($('#email'),evt)) {
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$(formMessages).text(response);
$('#name').val('');
$('#email').val('');
$('#phone').val('');
})
return false;
}
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorry Julian I was away. Your solution is great and already is integrated and working as expected. Thank you!
You are welcome.
Open in new window
But you will need to have your validate functions return a value - you don't want to submit unless they pass - so something likeOpen in new window
You will of course need to change your validateEmail and validateRequired to return either true or false depending on whether validation succeeded or not.