1

組み込みの HTML5 検証メソッドを使用して、フォームの生年月日を検証しています。

フォームには、次の 3 つの選択リスト要素があります。 user_dob_date user_dob_month user_dob_year

これら 3 つの要素はすべて、ユーザーが有効なオプションを選択する必要があるため、検証のために「必須」として配置されています。

ここで、ユーザーが 3 つのオプションすべてを選択し、少なくともオプションを選択するための HTML5 検証がうまくいった後、うるう年の日付をチェックし、ユーザーが 1998 年 2 月 31 日のようなものを選択していないことを確認したいと思います!!!

$('#form-signup-next').submit(function(){                       
   if($('#user_dob_month').val()=='2' && $('#user_dob_date').val()>29 ){
        var obj=$('#user_dob_date')[0];
        alert($('#user_dob_month').val());
        obj.setCustomValidity('Invalid Date!');         
   }else{
        var obj=$('#user_dob_date')[0];
        obj.setCustomValidity('');
    }
    return false;
    });

-> 送信をクリックしたときにカスタム メッセージが表示されません。ボタンを 2 回クリックすると実行されます。最初にクリックするとメッセージが設定されますが、表示されず、2回目にクリックするとエラーが表示されます

-> カスタムメッセージの間違った選択と表示の後、日付が修正され、フォームを送信しようとすると、それでもエラーがスローされます:(

これで私を助けてください。前もって感謝します ：）

4

1 に答える 1

1

フォームの送信時にそれを行うべきではありません。setCustomValidity値が設定されると、その検証エラー値がクリアされ、コードで問題が送信時にエラー値をクリアしていない限り、フォームの送信が許可されないためです。そのため、次回の実行時に値を修正しても検証エラーが発生します。

詳細については、このリンクを確認してくださいCURRENT IMPLEMENTATION ISSUES AND LIMITATIONS (特に問題 3)

わかりましたので、この方法でこれを行うことができます.ドロップダウン値の変更イベントでエラーメッセージを確認して設定することにより

$('#user_dob_date,#user_dob_month').on('change',function(){
    if($('#user_dob_month').val()=='2' && $('#user_dob_date').val()>29){
    $('#user_dob_date')[0].setCustomValidity('Invalid Date!');
    }
    else{
    $('#user_dob_date')[0].setCustomValidity('');
    }
  });

私はこれをチェックし、正常に動作しています。

そのため、ユーザーが間違った組み合わせを選択して送信ボタンを押すと、エラー メッセージが表示されます。

http://jsbin.com/aqicim/1でこれを試してください

于 2013-03-09T22:46:01.137 に答える