4

入力値が空の場合にフォームをチェックしたいのですが、それを行う最良の方法がわからないので、これを試しました：

Javascript:

  function checkform()
    {
      if (document.getElementById("promotioncode").value == "")
    {
        // something is wrong
        alert('There is a problem with the first field');
        return false;
    }

    return true;
    }

html:

  <form id="orderForm" onSubmit="return checkform()">
      <input name="promotioncode" id="promotioncode" type="text" />
      <input name="price" id="price" type="text" value="&euro; 15,00" readonly="readonly"/>
      <input class="submit" type="submit" value="Submit"/>
  </form>

誰かがアイデアやより良い解決策を持っていますか?

4

3 に答える 3

8

Adding the required attribute is a great way for modern browsers. However, you most likely need to support older browsers as well. This JavaScript will:

  • Validate that every required input (within the form being submitted) is filled out.
  • Only provide the alert behavior if the browser doesn't already support the required attribute.

JavaScript :

function checkform(form) {
    // get all the inputs within the submitted form
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // only validate the inputs that have the required attribute
        if(inputs[i].hasAttribute("required")){
            if(inputs[i].value == ""){
                // found an empty field that is required
                alert("Please fill all required fields");
                return false;
            }
        }
    }
    return true;
}

Be sure to add this to the checkform function, no need to check inputs that are not being submitted.

<form id="orderForm" onsubmit="return checkform(this)">
    <input name="promotioncode" id="promotioncode" type="text" required />
    <input name="price" id="price" type="text" value="&euro; 15,00" readonly="readonly"/>
    <input class="submit" type="submit" value="Submit"/>
</form>
于 2013-09-05T16:27:56.950 に答える
3

サポートする予定のブラウザによっては、HTML5 の必須属性を使用して JS を使用しないこともできます。

<input name="promotioncode" id="promotioncode" type="text" required />

フィドル。

于 2013-09-05T15:40:45.957 に答える
1

デモ: http://jsfiddle.net/techsin/tnJ7H/4/#

var form = document.getElementById('orderForm'),
    inputs=[], ids= ['price','promotioncode'];


//findInputs
fi(form);
//main logic is here
form.onsubmit = function(e){
   var c=true;
   inputs.forEach(function(e){ if(!e.value) {c=false;  return c;}  });
   if(!c)  e.preventDefault();
};


//findInputs function
function fi(x){
 var f = x.children,l=f.length;
 while (l) {
    ids.forEach(function(i){if(f[l-1].id == i) inputs.push(f[l-1]); });
    l--;
 } 
}

説明：

  • 送信プロセスを停止するには、event.preventDefault を使用します。イベントは、関数 onsubmit イベントに渡されるパラメーターです。html または addeventlistner にある可能性があります。
  • 送信を開始するには、デフォルトの実行を停止する必要があります。
  • false のみを返すことで forEach ループを中断できます。ブレークを使用しない; 通常のループと同じように..
  • このフォーラムが空かどうかをチェックする要素の名前を配置できる id 配列を配置しました。
  • find 入力メソッドは、単純に form 要素の子要素を調べて、それらの id が id 配列に含まれているかどうかを確認します。その場合、その要素を入力に追加し、送信する前に値があるかどうかを後でチェックします。そして、それがない場合、呼び出しはデフォルトを防ぎます。
于 2013-09-05T16:31:43.977 に答える