1

I have a simple form with some form fields. Some of them are required some are not. The required field are required by adding the class 'required'.

When I submit I check the #contact-form fields and on the basis of there I give the empty field error classes and submit the form yes or no.

Adding the error classes to the fields is not a problem, but checking the "error" variable is. Because I don't know where I can check the error variable.

This is my jQuery code:

$('#contact-form').submit(function (event) {
    var errors = false;
    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            errors = true;
        }
    });
    if (errors == true) {
        event.preventDefault();
    }
});

JsFiddle

9
  • 1
    can you create a fiddle? Code seems alright to me.
    – Amit Joki
    Jun 30, 2014 at 14:12
  • Create jsfiddle please Jun 30, 2014 at 14:17
  • @PratikJoshi Here is the jsFiddle jsfiddle.net/6Hpe9/1
    – Robbert
    Jul 1, 2014 at 7:27
  • what do you mean by checking the "error" variable?
    – Raver0124
    Jul 3, 2014 at 7:29
  • 1
    The code seems to work perfectly for me.
    – Scimonster
    Jul 3, 2014 at 7:31

3 Answers 3

3

The following code should do what you want, just give your contact form submit button the id of #contact-form-button.

$('#contact-form-button').click(function(e) {  // using click function
                                               // on contact form submit button
    e.preventDefault();  // stop form from submitting right away

    var error = false;

    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            error = true;
        }
    });

    if (!error) {                     // if not any errors
        $('#contact-form').submit();  // you submit form
    }

});
1
+50
$('#contact-form').submit(function (event) {
    var errors = false;
    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            errors = true;
        }
    });
    if (errors == true) {
        event.preventDefault();
        return false;
    }
    return true;
})

if validation cross successfully then it return true for submit the form

0

I found out that my code just works. The reason I thought it was not working, is because I was still using PHP handling my real website where I made 1 field required and in my jQuery not. This made the confusion.

So the following code works:

$('#contact-form').submit(function (event) {
    var errors = false;
    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            errors = true;
        }
    });
    if (errors == true) {
        event.preventDefault();
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.