web-dev-qa-db-ja.com

必須属性を持つすべてのフィールドのJavascript検証

私はこれに対する答えを求めて高低を検索しましたが、どこにもそれを見つけることができません。

HTMLの「必須」属性を持つフォームがあり、送信前に入力する必要があるフィールドを強調表示するというすばらしい仕事をしています...または実行する予定ですが、フォームがボルトで固定されているシステム（制御できない）とにかく数秒後にフォームを送信します。それはそれの提出のためにJavascriptに依存しています。したがって、必要な属性のすべてのフィールドをチェックするJavaScriptスクリプトを記述したいと思います。現在、必須にしたいフィールドを指定するスクリプトがありますが、代わりに属性を検索できればそれはすばらしいでしょう。

javascripthtmlformsrequired
13
nbren007

input [type = submit]を使用する場合、JavaScriptは必要ありません

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="submit" name="submit" value="Submit" />  
</form>

動作中 jsBin

ただし、input [type = button]を使用してフォームを送信する場合は、以下のスニペットを使用してください

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="button" name="button" value="Submit" />  
</form>

window.onload = function () {
  var form = document.getElementById('theForm');
  form.button.onclick = function (){
    for(var i=0; i < form.elements.length; i++){
      if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
        alert('There are some required fields!');
        return false;
      }
    }
    form.submit();
  }; 
};

Wotking jsBin

20
hex494D49

これにより、すべてのフォームフィールドタイプが検証されます

$('#submitbutton').click(function (e) {
    e.preventDefault();

    var form = document.getElementById("myForm");
    var inputs = form.getElementsByTagName("input"), input = null, select = null, not_pass = false;
    var selects = form.getElementsByTagName("select");
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];

        if(input.type == "hidden") {

            continue;
        }

        if(input.type == "radio" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "radio" && input.checked){
            not_pass = false;
            break;
        }

        if(input.type == "text" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "text" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "number" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "number" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "email" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "email" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "checkbox" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "checkbox" && input.checked) {
            not_pass = false;
            break;
        }
    }

    for(var i = 0, len = selects.length; i < len; i++) {
        select = selects[i];
        if(!select.value) {
            not_pass = true;
            break;
        } 
    }

    if (not_pass) {
        $("#req-message").show();//this div # in your form
        return false;
    } else {
     //do something here 
    }
});
1
Jason Liu