データ検証エラーが発生していない場合は、送信ボタンを無効にしてください

フォームの一部の入力フィールドを検証するためにJqueryフォームバリデータを使用していますが、達成しようとしているのは、ボタンをユーザーがクリックできないようにする必要があります（無効にする必要があります）データ検証エラーが発生していない場合は、送信ボタンを無効にしてください

ここから私は検証を受けました。 http://www.formvalidator.net/index.html#advanced_toggleDisabled

ここにコードがありますが、まだ送信ボタンをクリックできます。

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
</head> 

<body> 
<form action="#" method="POST"> 
    <p> 
    User name (4 characters minimum, only alphanumeric characters): 
    <input data-validation="length alphanumeric" data-validation-length="min4"> 
    </p> 
    <p> 
    Year (yyyy-mm-dd): 
    <input data-validation="date" data-validation-format="yyyy-mm-dd"> 
    </p> 
    <p> 
    Website: 
    <input data-validation="url"> 
    </p> 
    <p> 
    <button type="submit" value="Login">BIG BUTTOn</button> 
    </p> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
<script> 
    $.validate({ 
    lang: 'en' 
    }); 

    $.validate({ 
    modules : 'toggleDisabled', 
    disabledFormFilter : 'form.toggle-disabled', 
    showErrorDialogs : false 
}); 
</script> 

</body> 

</html>

出典

2016-09-15 Aurora

まず、あなたのフォームには、対象とする 'トグル無効化'クラスがありません。今それをしようと

<form action="#" method="POST" class="toggle-disabled"> 

Then you need to disabled the button initially. The plugin will later enable it. 

    <button type="submit" value="Login" disabled="disabled">BIG BUTTOn</button> 

Working code: 

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title of the document</title> 
    </head> 

    <body> 
     <form action="#" method="POST" class="toggle-disabled"> 
      <p> 
       User name (4 characters minimum, only alphanumeric characters): 
       <input data-validation="length alphanumeric" data-validation-length="min4"> 
      </p> 
      <p> 
       Year (yyyy-mm-dd): 
       <input data-validation="date" data-validation-format="yyyy-mm-dd"> 
      </p> 
      <p> 
       Website: 
       <input data-validation="url"> 
      </p> 
      <p> 
       <button type="submit" value="Login" disabled>BIG BUTTOn</button> 
      </p> 
     </form> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
     <script> 
      $.validate({ 
       lang: 'en' 
      }); 

      $.validate({ 
       modules: 'toggleDisabled', 
       disabledFormFilter: 'form.toggle-disabled', 
       showErrorDialogs: true 
      }); 
     </script> 

    </body> 

</html>

出典

2016-09-15 07:00:43 Ish

：D – Aurora

を私が働いて、それを試してみました – Aurora

。これを試みたが、ボタンは常に無効になります。私は作業コードを貼り付けました。チェック – Ish

データ検証エラーが発生していない場合は、送信ボタンを無効にしてください

答えて

関連する問題