0

HTMLでjavascriptを使用するのは少し新しいです。JavaScript を使用して HTML スクリプトを検証したいのですが、私が書いたものが機能していないようです。どこが間違っているのか誰か教えてもらえますか??? Javascript は次のとおりです。

<script type="text/javascript">
function mandatoryFields()
{
var x=document.forms["add"]["contract_id"].value
if (x==null || x=="")
  {
  alert("Please Enter the Contract Title");
  return false;
  }
var x=document.forms["add"]["storydiv"].value
if (x==null || x=="")
  {
  alert("Please Enter a Sprint");
  return false;
  }
var x=document.forms["add"]["storydiv"].value
if (x==null || x=="")
  { 
  alert("Please Enter a Story");
  return false
  }        
var x=document.forms["add"]["date1"].value
if ( x=="" || x==null) 
  { 
  alert("Please Enter a time");
  return false
  }  

</script>

そして、これが対応するHTMLスクリプトです

<form name="add" action="time-sheet/insert-time-sheet.php" method="post" onsubmit="return mandatoryFields()">
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="150">Select Date:</td>
    <td width="336"><input name="date" type="text" value="YYYY-MM-DD" maxlength="100" class="datepick" id="date1" /></td>
  </tr>
  <tr>
    <td>Contract:</td>
    <td><SELECT NAME="contract_id" onChange="getSprint(this.value)"><OPTION VALUE=0>--- Select Contract ---<?php echo $options_contract?></SELECT></td>
  </tr>
  <tr>
    <td>Sprint:</td>
    <td><div id="sprintdiv"><select name="sprint" >
    <option>--- Select Sprint ---</option>
        </select></div></td>
  </tr>
  <tr>
    <td>Story:</td>
    <td><div id="storydiv"><select name="story">
    <option>--- Select Story ---</option>
        </select></div></td>
  </tr>
  <tr>
    <td>Dev Time:</td>
    <td><input name="dev_time" size="20" onkeyup="ondalikSayiKontrol(this)" /></td>
  </tr>
  <tr>
    <td>PM Time:</td>
    <td><input name="pm_time" size="20" onkeyup="ondalikSayiKontrol(this)"/></td>
  </tr>
  <tr>
    <td colspan="2"><table width="182" border="0" align="center" cellpadding="2" cellspacing="2">
      <tr>

        <td width="68"><input name="Submit" type="submit" id="Submit" value="Add Time Sheet" /></td>
        <td width="48"><label>
          <input type="reset" name="reset" value="Reset" />
        </label></td>
        <td width="46"><div align="center"><a href="javascript:history.go(-1);">Back</a></div></td>
      </tr>
      <input type="hidden" name="day" value="<?php echo $day; ?>" />
      <input type="hidden" name="employee_id" value="<?php echo $employee_id; ?>" />
    </table></td>
    </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
</form>

前もって感謝します！

4

3 に答える 3

2

関数に右中かっこがありません。ブラウザのエラー コンソールを確認すると、おそらくmandatoryFields()undefined であることがわかります。右中括弧を追加すると、それが修正されます。trueまた、検証に失敗しなかった場合にも戻る必要があります。最後に、各 if の前に x を再宣言します。エラーが発生するかどうかはわかりませんが、それでも修正する必要があります。

<script type="text/javascript">
function mandatoryFields()
{
    var x=document.forms["add"]["contract_id"].value;
    if (x==null || x=="")
    {
        alert("Please Enter the Contract Title");
        return false;
    }
    x=document.forms["add"]["storydiv"].value;
    if (x==null || x=="")
    {
        alert("Please Enter a Sprint");
        return false;
    }
    x=document.forms["add"]["storydiv"].value;
    if (x==null || x=="")
    { 
        alert("Please Enter a Story");
        return false;
    }
    x=document.forms["add"]["date1"].value;
    if ( x=="" || x==null) 
    {
        alert("Please Enter a time");
        return false;
    }
    return true; // ADD THIS
} // ADD THIS
</script>
于 2013-03-26T14:20:58.657 に答える
0

適切な要素を取得し、スプリントとストーリー内のオプションでループを実行します。フォームの名前と選択ボックスの名前を使用して、要素に直接アクセスできます。

var x = document.add.contract_id.value;
if(){
 ... your stuff here
}

name 属性を使用せずに最初のフォームにアクセスすることもできます。

x = document.forms[0].contract_id.value;

可能なオプションをスプリントループでループし、アラートを出します。

x = document.add.sprint;
var selected = false;
for (i = 0; i < x.length; ++i){
   if (x.options[i].selected == true)
      selected = true;
}
if(!selected){
   alert("Select a story please!");
   return false;
}

x = document.add.story;
selected = false;
// same procedure

getElementByID() および getElementsByTagName() を介して要素にアクセスすることもできます。後者は、一致したすべての要素の配列を返します。

document.getElementById('storydiv').getElementsByTagName('story')[0];

document.getElementsByTagName('contract_id')[0];

また、すべての検証ステップで var x を再宣言しないでください。

于 2013-03-26T14:50:56.760 に答える
0

すべてのフィールドが正しい場合、関数はtruemadatoryFields()を返しません。

ここから：

イベント ハンドラーがフォーム オブジェクトの onsubmit 属性によって呼び出される場合、コードは return 関数を使用して戻り値を明示的に要求する必要があり、イベント ハンドラーは、イベント ハンドラー関数で可能なコード パスごとに明示的な戻り値を提供する必要があります。

于 2013-03-26T14:24:23.743 に答える