Jquery Rangeerror On Form Submit

I have a form I am implementing some custom validation on. This is the block of JavaScript that handles the final check before the form is submitted: $('.enquiry-form-container for

Solution 1:

Generally, you just need to worry about cancelling an event in the if/then branches of your validation logic that indicate a problem. If you don't hit those branches, the form submits as it normally would. This removes the need for you to manually indicate that you want the form submitted.

See comments inline below for details:

$('.enquiry-form-container form').submit(function (e) {
        var invalid = false;
        var isblank = false;
        // Loop through each input and check if valid or empty
        $('.validate').each(function () {
            if ($(this).hasClass('invalid')) {
                isInValid($(this));
                invalid = true;
                e.preventDefault();
                return;
            } else {
                // Any fields are blankif ($(this).val() === "") {
                    $(this).addClass('blank');
                    isblank = true;
                    e.preventDefault();
                    return;
                } else {
                    $(this).addClass('valid');
                    isValid($(this));
                    $(this).removeClass('blank empty');
                }
            }
        });

        // If we've gotten this far, the form is good and will be submitted.   // No need for an if/then/else here because you've already trapped // the conditions that would prevent the form from being submitted// above.// Prevent submit to prevent duplicate submissions
        $(this).find(":submit").prop("disabled", true); 
    });

It's also a good idea to separate your validation code into its own function, so a reworked example would be:

$('.enquiry-form-container form').submit(function (e) {
  // You only need to worry about cancelling the form's submission// if the form is invalid:if (!validate()) {
    e.preventDefault();
    return;
  }

  // If it is valid, you don't need to interfere in that process, but// you can certainly do other "valid" operations:// Prevent submit from being clicked to prevent duplicate submissions
  $(this).find(":submit").prop("disabled", true);  
});

functionvalidate() {
  // This function doesn't worry about cancelling the form's submission. // Its only job is to check the elements, style them according to // their validity (and, in a perfect world, the styling would be off-// loaded to anther function as well) and return whether the form is // valid or not.var invalid = false;
  var isblank = false;

  // Loop through each input and check if valid or empty
  $('.validate').each(function () {
    if ($(this).hasClass('invalid')) {
      isInValid($(this));
      invalid = true;   
    } else {
      // Any fields are blankif ($(this).val() === "") {
        $(this).addClass('blank');
          isblank = true;
      } else {
        $(this).addClass('valid');
        isValid($(this));
        $(this).removeClass('blank empty');
      }
    }
  });

  // If invalid or isblank is true, there was a problem and false// should be returned from the functionreturn !invalid || !isblank;
}

Solution 2:

I think the main problem for you is calling submit() from inside the handle of the submit. the better way to do this is cancel the request just when you see that there is invalid data.

$('.enquiry-form-container form').submit(function (e) {
        e.preventDefault();
        var invalid = false;
        var isblank = false;
        //Loop through each input and check if valid or empty
        $('.validate').each(function () {
            if ($(this).hasClass('invalid')) {
                isInValid($(this));
                invalid = true;
            } else {
                //Any fields are blankif ($(this).val() === "") {
                    $(this).addClass('blank');
                    isblank = true;
                } else {
                    $(this).addClass('valid');
                    isValid($(this));
                    $(this).removeClass('blank empty');
                }
            }
        });
        if (!invalid & !isblank){ //SEND
            $(this).find(":submit").prop("disabled", true); //Prevent submit to prevent duplicate submissionsreturntrue;
        } else { //DONT SENDreturnfalse;
        }        
    });

Solution 3:

I think the main problem for you is calling submit() from inside the handle of the submit. the better way to do this cancels the request just when you see that there is invalid data.

$('.enquiry-form-container form').submit(function (e) {
    // remove the e.preventDefault();var invalid = false;
    var isblank = false;
    //Loop through each input and check if valid or empty
    $('.validate').each(function () {
        if ($(this).hasClass('invalid')) {
            isInValid($(this));
            invalid = true;
        } else {
            //Any fields are blankif ($(this).val() === "") {
                $(this).addClass('blank');
                isblank = true;
            } else {
                $(this).addClass('valid');
                isValid($(this));
                $(this).removeClass('blank empty');
            }
        }
    });

    if (!invalid & !isblank){ //SEND
        $(this).find(":submit").prop("disabled", true); //Prevent submit to prevent duplicate submissions//$(this).submit(); // this should be removed
    } else { //DONT SEND
           e.preventDefault();
    }
});