フォーム送信時に無効な入力フィールドを検出することはできますか？

Question

以下のコードを使用して、.on("invalid")関数を使用して、フォームを送信するときにフィールドにエラーがあるかどうかを検出できます。エラーがあった場合は、inputとtextareaのどちらかが空か、長すぎるか短すぎるかをチェックし、クラス.errorを追加します。

しかし、コードを単純化して、関数内に追加のifステートメントを実行する必要がないようにする方法があるのだろうかと思います。ここ

$("form input, form textarea").on("invalid", function(event) { 
 
    var input1 = document.getElementById('input1'); 
 
    var input2 = document.getElementById('input2'); 
 

 
    if (!input1.value || input1.value.length < 9 || input1.value.length > 69) { 
 
    input1.classList.add('error'); 
 
    setTimeout(function() { 
 
     input1.classList.remove('error'); 
 
    }, 500); 
 
    } 
 

 
    if (!input2.value || input2.value.length < 21 || input2.value.length > 899) { 
 
    input2.classList.add('error'); 
 
    setTimeout(function() { 
 
     input2.classList.remove('error'); 
 
    }, 500); 
 
    } 
 
});

.error { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="input1" minlength="8" maxlength="70" required> 
 
    <textarea id="input2" maxlength="900" required></textarea> 
 
    <input type="submit"> 
 
</form>

xフォームが無効であることに起因フィールド（入力またはTEXTAREA）で私が探しているものの例である：

$("form input, form textarea").on("invalid", function(event) { 
    x.classList.add('error'); // variable x 
    setTimeout(function() { 
     x.classList.remove('error'); // variable x 
    }, 500); 
}); 

私は理想的にはJavaScriptに固執したいと思いますが、jQueryが必要になることがあります。

Answer 1

javascriptでターゲットを正確に見つけることはできませんが、htmlにはoninvalidイベントリスナーが使用されます。

<input type="text" oninvalid="alert('You must fill out the form!');" required>

形ではなく、それがフォームイベントとしてパッケージ化されるので、無効戻ると、これは入力イベントとしてトリガされます。その特定の入力がフォーム提出時に間違っていると、javascriptで好きなことをすることができます。

Answer 2

https://www.w3schools.com/jsref/event_onsubmit.asp イベントはおそらくより良いオプションになります。あなたは私がによって、ヨハネ・パウロPenalozaにより、特に、提案のおかげでこの問題を解決することができたSafariブラウザで問題

<form onsubmit="validateForm()"> 
    Enter name: <input type="text"> 
    <input type="submit"> 
</form> 

function validateForm() { 
    //your code here 
    if(validationfails){ 
     return false; //if arrives here means the form won't be submited 
    } 
} 

Answer 3

を見つけるでしょうoninvalid使用している場合は、代わりに、すべてのブラウザ

https://www.w3schools.com/jsref/event_oninvalid.asp に有効です入力フィールドとテキストエリアにoninvalidを使用します。私は、入力フィールドにクラス.errorを追加した関数を呼び出した - それは私の質問のコードと同じように行いますが、単純：

function error(field) { 
 
    field.classList.add('error'); 
 
    setTimeout(function() { 
 
    field.classList.remove('error'); 
 
    }, 500); 
 
}

.error { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="input1" oninvalid="error(this);" minlength="8" maxlength="70" required> 
 
    <textarea id="input2" oninvalid="error(this);" maxlength="900" required></textarea> 
 
    <input type="submit"> 
 
</form>

Answer 4

それとも、違った考え方と実際を提供することができます時間エラー報告。

あなた<form>要素にid="myForm"を追加し、ラインの中のJSを使用します。

ここ

var allInputs = $('#myForm :input'); 
var inputsFuked = [] 

allInputs.each(function(index) { 
    console.log(allInputs[index]); 
    $(allInputs[index]).change(function() { 
    if (allInputs[index].checkValidity()) inputsFuked[index]=1; 
    else inputsFuked[index]=0; 
    }); 
}); 

は、検証せずに複数の要素のカップルとJSfiddleに取り組んでいます。

これは、入力コードが変更されるたびに実行される変更コードにバインドされます。これは例であるため、配列内の値のみを切り替えるだけです。検証したいときは、どちらが間違っているかを確認するだけです。配列に要素を格納した場合は、どの要素を記述することができます。トグルインデックスロジックを切り替えてアレイに追加/削除します。

しかし、この装置では、より良いやり方をすることができます。無効な要素に即座に反応することができます。配列のインデックスを変更する代わりに、警告を表示したり、エラーを表示したり、要素を赤にしたりすることができます。基本的にユーザーとのやりとりは、入力ミスを起こした要素からフォーカスを外した瞬間に、代わりにある時点で受動的に行うようになりました。