jQuery: how to include validation in the ajaxForm function?

Question

This question has been asked, but the answer wasn't confirmed. I tried it but it didn't work. So I would like to ask the same question again (Is this appropriate? If not, please advise me what to do).

I have a form which needs to be validates and then submitted with ajaxForm (the form contains image and file data, so submission with .serialize() won't work). The following are the details:

HTML:

<form id="myForm" action="..." method="post" enctype="multipart/form-data">
  ...
  <input type="file" name="image" /><br />
  <input type="file" name="file" /><br />
  ...
</form>

jQuery:

$(document).ready(function() {

  $("#myForm").ajaxForm ({

    beforeSubmit: function() {
      $("#myForm").validate({
        onkeyup:false,
        rules: {
          ...
        },
        messages: {
          ...
        },
      });
    },

    success: function(returnData) {
      $('#content').html(returnData);
    }

  });

});

The ajaxForm part is OK. But the form is simply submitted without validation.

Sparky · Accepted Answer · 2013-03-10T17:21:51.043

.validate() is used for initializing the plugin on DOM ready, so pull that outside of the other function.

Initialize the two plugins within DOM ready, and then utilize any appropriate built-in callback functions...

Use the beforeSubmit callback function of the ajaxForm plugin to programmatically check the form's validity using the Validate plugin's .valid() method.

You will not need to worry about creating any new submit handler or click handler functions since both plugins already capture the submit event automatically.

Working DEMO: http://jsfiddle.net/MF26D/

Rearrange your code into something more like this:

$(document).ready(function () {

    $("#myForm").validate({ // initialize the plugin
        // any other options,
        onkeyup: false,
        rules: {
            //...
        },
        messages: {
            //...
        }
    });

    $("#myForm").ajaxForm({ // initialize the plugin
        // any other options,
        beforeSubmit: function () {
            return $("#myForm").valid(); // TRUE when form is valid, FALSE will cancel submit
        },
        success: function (returnData) {
            $('#content').html(returnData);
        }
    });

});

Wow! The code works immediately. Thanks a million, Sparky. You saved my life. — Randy Tang, Mar 11 '13 at 01:50

PSR · Answer 2 · 2013-03-10T12:59:51.657

1

try this

   $(document).ready(function() {

      $("#myForm").ajaxForm ({

        beforeSubmit: function() {
           if (!$("#myform").valid())
                    return;
        },

        success: function(returnData) {
          $('#content').html(returnData);
        }

      });

    });

edited Mar 10 '13 at 12:59

answered Mar 10 '13 at 12:41

PSR

39,804
41
111
151

This seems very similar to the original solution. How do I arrange the `.valid()` function? – Randy Tang Mar 10 '13 at 12:57

charlietfl · Answer 3 · 2013-03-10T16:26:16.417

1

Can call the form plugin within a submit handler:

$("#myForm").submit(function(e){
  e.preventaDefault();

   var isValid=/* run your validation code that determines true or false*/

   if( isValid){
     $(this).ajaxForm({/* plugin options*/})
  }

})

edited Mar 10 '13 at 16:26

answered Mar 10 '13 at 12:41

charlietfl

170,828
13
121
150

Sorry, I am not very familiar with jQuery. How do I set the value of the variable `isValid` by `validation()` function? Thanks. – Randy Tang Mar 10 '13 at 13:12
Are you using a plugin to validate? If so , what plugin ( provide link to docs). – charlietfl Mar 10 '13 at 13:16
I think you're missing a `(function` next to `.submit`. – Sparky Mar 10 '13 at 16:24
I'm using jzaefferer's plugin: https://github.com/jzaefferer/jquery-validation. – Randy Tang Mar 11 '13 at 00:25
try using `ajaxSubmit` within validate `submitHandler` callback. See example in validate plugin docs: http://docs.jquery.com/Plugins/Validation/validate#toptions Have never had problems using `submitHandler` – charlietfl Mar 11 '13 at 00:31

jQuery: how to include validation in the ajaxForm function?

3 Answers3

Linked