一度に1つではなくHTML5で一度にすべてのフィールドを妥当性検査

一度に1つではなくすべてのフィールドを一度に検証する方法はありますか？一度に1つではなくHTML5で一度にすべてのフィールドを妥当性検査

JavaScriptを数行使用するのは問題ありませんが、実際にはモジュール全体を使用する必要はありません。

かなり検索しましたが、これに対してクリーンな解決策が見つかりませんでした。ここで

は、サンプルフォームです：

<html> 
    <head> 
     <title>Validation Test</title> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <form action="" id="myForm" method="post"> 
     <input id="name" name="name" required type="text"> 
     <input id="phone" name="phone" required type="text"> 
     <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html>

CSSファイル：

input:focus:required:invalid { 
    border: 2px solid red !important; 
}

ポストが重複する可能性が一つのフィールドのための複数の検証条件を持つためであるとして、私は提案しましたすべての無効なフィールドを一度に検証/表示することを目指しています。フォームタグの

出典

2015-09-29 Mankind1023

の可能重複[HTML5を使用して、複数の入力検証を作成する方法？]（http://stackoverflow.com/questions/14114267/how-to-make-multiple-input-validation-using-html5） – halfzebra

ありがとうございますが、その投稿は1つのフィールドに複数の検証条件があるため、すべての無効なフィールドを一度に検証/表示したいと考えています。 – Mankind1023

ベーシック（ヌルフィールドなし）の検証や何かもっと複雑なことはしていますか？ –

あなたはjQueryのを使用しない場合、それは結構です。これを簡単に行うには、バニラjsイベントハンドラとDOMセレクタを使用します。私は時間を節約するためにjQueryを使用しています。

$('#myForm').on('submit', function() { 
    var $inputs = $(this).find(':input'), 
     isValid = true; 

    $inputs.each(function() { 
    if ($(this).val() == '') { 
     isValid = false; 
     $(this).addClass('error-control'); 
    } else { 
     $(this).removeClass('error-control'); 
    } 
    }); 

    return isValid 
});

出典

2015-09-29 17:30:32

これは実際に私がやっていたこととうまくうまくいった、ありがとう。 – Mankind1023

使用をonSubmit：

参照：http://www.w3schools.com/js/js_validation.asp

<form action="" id="myForm" method="post" onsubmit="return validateForm()">

のJs：

function validateForm() { 
    // validate form here 
    // return false if there are errors 
    // return true to submit the form 
}

出典

2015-09-29 17:25:41

一度に1つではなくHTML5で一度にすべてのフィールドを妥当性検査

答えて

関連する問題