数据欧芹不停止表单提交

Question

I thought Data-Parsley is supposed to stop form submit when errors are found. When I submit the following form, I briefly see the errors caught by data-parsley, but then the form action goes through. What am I missing here?

<div id="registerreg" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Register...</h4>
                </div>
                <div class="modal-body">

                <form action="<?php echo 'register_success.php'; ?>" method="POST" name="registration_form" id="registration_form" class="margin-bottom-0">

                    <div class="form-group">
                        <label>First Name:</label>
                        <input type="text" id="first" name="first" class="form-control input-lg" placeholder="First Name" required />
                    </div>
                    <div class="form-group">
                        <label>Last Name:</label>
                        <input type="text" id="last" name="last" class="form-control input-lg" placeholder="Last Name" required />
                    </div> 
                     <div class="form-group">
                         <label>Email:</label>
                        <input type="email" class="form-control input-lg" placeholder="Email Address" id="emailreg" name="emailreg" onkeyup="checkvalid()" data-parsley-trigger="change" required />
                        <div id="emailwarning" style="color:red;"></div>
                    </div>
                    <div class="form-group">
                        <label>Password: (At least 6 charactors with 1 number)</label>
                        <input type="password" id="passwordreg" name="passwordreg" class="form-control input-lg" placeholder="Password" data-parsley-minlength="6" data-parsley-pattern="/^[a-zA-Z0-9., ]*[0-9]+[a-zA-Z0-9., ]*$/" title="Passwords must be at least 6 characters long, contain at least one uppercase letter (A..Z), at least one lower case letter (a..z), and at least one number (0..9)"/>
                    </div>
                    <div class="form-group">
                        <label>Repeat Password:</label>
                        <input type="password"  name="confirmpwd"  id="confirmpwd" class="form-control input-lg" placeholder="Repeat Password" data-parsley-equalto="#passwordreg" data-parsley-error-message="The entered text does not match the password field."/>  
                    </div>   

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
                </div>
                </form>

            </div>
        </div>
</div>

<script type="text/javascript">
    $('#registration_form').parsley();
</script>

Answer 1

The onclick event in the submit button is overriding data parsley functions. Removing the onclick event from the submit button and letting data parsley fire the events solved the problem.

changed ...

 <input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >

to...

<input type="submit" id="registerbutton" class="btn btn-primary" value="Register" >

and ...

  $('#registration_form').parsley();

to....

  $('#registration_form').parsley().on('form:success', function() {
  var form = document.getElementById('registration_form');
  var passwordreg = form.passwordreg;
  return regformhash(form, passwordreg);
 });