form post is omitted after jquery validation is completed [duplicate]

问题

UPDATE: Closing this thread since issue was the remote post was interfering with form post. More can be found at this new post

Before I add validation, the form is posting correctly.

Got this form, which validates the email and after it is done the form completes the onsubmit javascript function but the data of the form is not posted? Why?

Also I tried to use the action but after the form is validated the action is never used.

Here is the form:

<form  id="signup_form" name="signup_form"  method="post" onsubmit="loadPage('registration')">  
<!--action="/registration" method="post"--> 
  <h2>E-MAIL ADDRESS<sup><b>*</b></sup></h2>
  <input value="<?=$uEmail?>" type="text" name="signup_email" id="signup_email" size="40" class="" style="margin-right:6px;font-size:18px" /><br /><label for="signup_email">Example: me@mydomain.com</label>
  <br class="clear" /><br />
  <h2>PASSWORD<sup><b>*</b></sup></h2>
  <input type="password" name="requiredpWord" id="requiredpWord"  size="15" style="width:120px" ><br />
  <h2>CONFIRM PASSWORD<sup><b>*</b></sup></h2>
  <input type="password" name="requiredcpWord" id="requiredcpWord"  size="15" style="width:120px" ><br />
  <button id="submitBTN" type="submit" value="COMPLETE SIGNUP">COMPLETE SIGN UP</button>
</form>

The action is commented out and I tried using that to replace the onsubit but when I do the action of pressing the button does nothing.

Here is the form JQuery validation, which works. I added the submitHandler to see if the form would include the post. it did nothing as of now.

$(function() {
    $("#signup_form").validate({
        rules: {
            signup_email: {
                email: true,
                required: true,
                remote: { 
                    type: 'post',
                    url: 'registration/isEmailAvailable',
                    data: {
                        email:
                            function() {
                                 // console.log(data);
                                return $( "#signup_email" ).val();
                            }
                    }
                }
            },
            requiredpWord: {
                required: true,
                minlength: 8
            },
            requiredcpWord: {
                equalTo: "#requiredpWord"
            }
        },
       messages: {
          signup_email: {
            required: "Please provide an email",
            email: "Please enter a valid email address"//,
           },
          requiredpWord: {
            required: "Please provide a password.",
            minlength: "Your password must be at least 8 characters long"
           },
          requiredcpWord: "Your passwords do not match."
      },
    invalidHandler: function(form, validator) {
       var errors = validator.numberOfInvalids();
       if (errors) {
          var message = errors == 1
          ? 'Please correct the following error:\n'
          : 'Please correct the following ' + errors + ' errors.\n';
          var errors = "";
          if (validator.errorList.length > 0) {
           for (x=0;x<validator.errorList.length;x++) {
               errors += "\n\u25CF " + validator.errorList[x].message;
           }
        }
       alert(message + errors);
      }
      validator.focusInvalid();
     },
      //added this to see if the form would post, did not change it
       submitHandler: 
         function(form) {
              // do other things for a valid form
              form.submit();
           }
});

the php code is simple...

var_dump($_POST);
var_dump($_GET);

The POST returns an empty array. No form data at all.

The GET returns "registration"

The loadPage("registration") function is simply the following:

function loadPage(name){    
    window.location.replace('/'+name);

}

So to reiterate my questions:

Why is the form data missing from the POST?
BONUS: Why after the form validates the action does nothing, but onsubmit works? Note this holds true if I exclude the submitHandler from the JQuery validation.

Update: Test for Form validation, form is validating as true or false correctly.

$( "#submitBTN" ).click(function() {
  alert( "Valid: " + $("#signup_form").valid() );
});

UPDATE:

Added invalidHandler code, form validates correctly, displays only if there is an error. This is not a validation issue.
Removed onsubmit for action, now validation does nothing. Using jQuery validation plug-in 1.7. I'm going to check for a newer release. NOTE code above still displays onsubmit because i don't want to change the whole problem.
submitHandler is also uncommented. The alert is not being displayed.

UPDATE 4 Issue resides with remote post for email validation. If i comment out the remote verification the post actually completes. Opened a new question based upon this finding.

回答1:

Removing onsubmit="loadPage('registration')" and uncommenting the submitHandler part should do the job. Also uncomment the action="/registration" in the form's attribute list

来源：https://stackoverflow.com/questions/31966294/form-post-is-omitted-after-jquery-validation-is-completed

标签

jquery

jquery-validate