Question

我认为Data-Parsley应该在发现错误时停止表单提交。当我提交以下表单时，我会简要地看到data-parsley捕获的错误，但随后表单操作会完成。我在这里缺少什么？

<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

提交按钮中的onclick事件覆盖了数据欧芹函数。从提交按钮中删除onclick事件并让数据解析事件解决了问题。

改变了......

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

为...

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

和......

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

于...

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

数据欧芹不停止表单提交

1 个答案: