在parsley.js驗證后阻止表單提交

Question

我已經多次使用parsley.js並且從字面上復制了我上次使用歐芹的代碼。

但是，每次我提交表單時頁面都會刷新。 preventDefault似乎可以在我的其他頁面上工作，並阻止頁面刷新，但由於某些原因我現在嘗試它將無法正常工作。 任何人都可以找出原因嗎？

<script>
    $(function(){
        $("#register_signup").submit(function(e){
            e.preventDefault();
            var form = $(this);
            if ($('#rform').parsley( 'isValid' )){
                alert('valid');
            }
        });
    });
</script>

<form id='rform' name='rform' data-parsley-validate>
    <input id='reg_password' class='register_input' type='text'  autocomplete="off" data-parsley-trigger="change" placeholder='Password' required>
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required>

    <input id='register_signup' type="submit" onClick="javascript:$('#rform').parsley( 'validate' );" value='Sign Up' />
</form>

Answer 1

您將submit事件綁定到input元素。 如果你檢查jquery $ .submit（）文檔 ，它說明：

當用戶嘗試提交表單時，submit事件將發送到元素。 它只能附加到<form>元素 。 可以通過單擊顯式<input type="submit"> ， <input type="image">或<button type="submit"> ，或者在某些表單元素具有焦點時按Enter鍵來<button type="submit">表單。

這是您的主要問題，這就是永遠不會顯示alert原因（事實上，該代碼永遠不會被執行）。

我也會改變一些事情：

1. $('#rform').parsley( 'validate' )應該是$('#rform').parsley().validate() ，假設你正在使用Parsley 2. *
2. $('#rform').parsley( 'isValid' )應該是$('#rform').parsley().isValid() 。
3. 使用$.on()而不是$.submit() 。
4. 從register_signup元素中刪除onClick 。 由於您已經在使用javascript，我會直接在javascript代碼而不是onclick中執行此操作。 這更像是個人偏好。

所以，你的代碼將是這樣的：

<form id='rform' name='rform'>
    <input id='reg_password' class='register_input' type='text'  autocomplete="off" 
        data-parsley-trigger="change" placeholder='Password' required>
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword"
         placeholder='Confirm password' data-parsley-equalto="#reg_password" required>

    <input id='register_signup' type="submit" value='Sign Up' />
</form>

<script>
    $(document).ready(function() {
        $("#rform").on('submit', function(e){
            e.preventDefault();
            var form = $(this);

            form.parsley().validate();

            if (form.parsley().isValid()){
                alert('valid');
            }
        });
    });
</script>

Answer 2

當您將data-parsley-validate應用於表單時，您不需要將javascript應用於表單以停止提交，直到所有驗證運行。 但是如果你應用javascript，當parsely（）無效時返回false。 並確保您已包含parsley.js代碼文件。

Answer 3

如果您使用parsely 2，您可以試試這個

$(function () {
//parsely event to validate form -> form:valiate
$('#rform').parsley().on('form:validate', function (formInstance) {
    //whenValid return promise if success enter then function if failed enter catch
    var ok = formInstance.whenValid()
    //on success validation
    .then(function(){
        alert('v');
        formInstance.reset();
    })
    //on failure validation
    .catch(function(){
        formInstance.destroy();
    });

$('.invalid-form-error-message')
  .html(ok ? '' : 'You must correctly fill *at least one of these two blocks!')
  .toggleClass('filled', !ok);
  // console.log(formInstance);
if (!ok)
  formInstance.validationResult = false;
  console.log(formInstance);
});

//parsely event to submit form -> form:submit
$('#rform').parsley().on('form:submit', function (formInstance) {
// if you want to prevent submit in any condition after validation success -> return it false
return false;
});

//default submit still implemented but replaced with event form:submit
$('#rform').submit(function () {
  alert('dd');
});
});

有關詳細信息，請參閱文檔檢查表單以及示例和事件