私はこれに対する答えを求めて高低を検索しましたが、どこにもそれを見つけることができません。
HTMLの「必須」属性を持つフォームがあり、送信前に入力する必要があるフィールドを強調表示するというすばらしい仕事をしています...または実行する予定ですが、フォームがボルトで固定されているシステム(制御できない)とにかく数秒後にフォームを送信します。それはそれの提出のためにJavascriptに依存しています。したがって、必要な属性のすべてのフィールドをチェックするJavaScriptスクリプトを記述したいと思います。現在、必須にしたいフィールドを指定するスクリプトがありますが、代わりに属性を検索できればそれはすばらしいでしょう。
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
これにより、すべてのフォームフィールドタイプが検証されます
$('#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
}
});