0

ユーザーが入力するフォームがあり、空のフィールドは JavaScript 検証を促し、その特定のフィールドに入力するメッセージを返します。「アラート」メッセージを返すにもかかわらず、フォームが送信されることを除いて、これをすべて達成できます。どうすればこれを回避できますか? これが私のJavaScriptです：

function validateHandAppr(theForm) {

    // Recom or Not Recom  
    if (document.project.rec.selectedIndex == 0) {
        alert("Please Choose the Recommendation Priority .");
        project.rec.focus();
        return false;
    }

    // Recommended priorities 
    if (document.project.rec.selectedIndex == 2 && document.project.recvd_dt.value == "") {

        alert("Fill in the date when culture was received.");
        project.recvd_dt.focus();
        return false;
    }

    if (document.project.rec.selectedIndex == 2 && document.project.recvd_by.value == "") {

        alert("Specify who received the culture.");
        project.recvd_by.focus();
        return false;
    }


    if (document.project.rec.selectedIndex == 2 && document.project.recvd_dt.value != "") {
        var validformat = /^\d{4}\-\d{2}\-\d{2}$/; //.test(project.recvd_dt.value) //Basic check for format validity

        if (!validformat.test(project.recvd_dt.value)) {
            alert("Invalid Date Format. Please enter in the following format: yyyy-mm-dd.")
            return false;
        } else { //Detailed check for valid date ranges
            var yearfield = project.recvd_dt.value.split("-")[0]
            var monthfield = project.recvd_dt.value.split("-")[1]
            var dayfield = project.recvd_dt.value.split("-")[2]
            var dayobj = new Date(yearfield, monthfield - 1, dayfield)
            if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield)) {
                alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
                return false;
            } else {
                return true;
            }
        }
    }
}

以下は、JavaScript が呼び出されるフォームです。

<form accept-charset="UTF-8" id="project" name="project"
      action="hand_submit_forms.php" method="post"
      onSubmit="return validateHandAppr(this)"
      class="user-info-from-cookie" enctype="multipart/form-data">

以下は、DaveRandom の提案に従って、更新されたコードです。

      function validateHandAppr(theForm) {

  // Recom or Not Recom  
  //var val=true;
      if ( document.project.rec.selectedIndex == 0 )
       {
          alert ( "Please Choose the Recommendation Priority ." );
      document.project.rec.focus();
          return false;
        }



    // Recommended priorities 
       if ( document.project.rec.selectedIndex ==2 && document.project.recvd_dt.value == "")
       {

            alert("Fill in the date when culture was received.");
         document.project.recvd_dt.focus();
         return false; 
    }

       if ( document.project.rec.selectedIndex ==2 && document.project.recvd_by.value == "")
     {

  alert("Specify who received the culture.");
  document.project.recvd_by.focus();
  return false; 
  }


    if ( document.project.rec.selectedIndex ==2 && document.project.recvd_dt.value != ""){
        var validformat=/^\d{4}\-\d{2}\-\d{2}$/ ; //.test(project.recvd_dt.value) //Basic check for format validity

        if (!validformat.test(project.recvd_dt.value))
        {
        alert("Invalid Date Format. Please enter in the following format: yyyy-mm-dd.")
        return false;
        }
        else{ //Detailed check for valid date ranges
        var yearfield=project.recvd_dt.value.split("-")[0]
        var monthfield=project.recvd_dt.value.split("-")[1]
        var dayfield=project.recvd_dt.value.split("-")[2]
        var dayobj = new Date(yearfield, monthfield-1, dayfield)
        if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
        {
        alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
        return false;}
        else
        {
        return true; }
        }
    }

  //    return val;
      }
4

1 に答える 1

0

問題は次の行です。

project.rec.focus();
// ...
project.recvd_dt.focus();
// ...
project.recvd_by.focus();

検証条件は参照していますdocument.projectが、上記の行は単純に- の子であり、ローカルで宣言していないprojectため、グローバルには存在しません。documentwindow

これらの行はalert()行と行の間にあるためreturn false;、アラートは表示されますが、return ステートメントに到達することはありません。そのため、関数は false を返さず、フォームは送信されます。

行を次のように変更した場合:

document.project.rec.focus();
// ...
document.project.recvd_dt.focus();
// ...
document.project.recvd_by.focus();

...うまくいくはずです。

でも

インライン イベント ハンドラを使用する代わりに、 <form>s DOM オブジェクトのイベントに関数を割り当てる必要があります。submit

これを行うと、関数の最初の引数にイベント オブジェクトが渡され、event.preventDefault()返す代わりに を使用できますfalse。これにより、問題が回避され (エラーが発生する前に行が配置されていた場合)、通常、これを処理するためのより良い方法です。これは、戻るfalseとイベントの伝播も停止するためです。これは望ましくない場合があります。実際には、この特定の場合がありますが、一般的なルールとしては true です。

これを行うと、ハンドラーは DOM オブジェクトのコンテキストで実行されるため、this変数はそれへの参照となり、引数として渡す必要はありません。

于 2013-01-03T12:03:34.773 に答える