フォーム用にthisテンプレートを使用しています。テキスト入力の場合、入力を検証する機会を提供します（単純な場合：空の場合は赤いボックス、そうでない場合は赤いボックス、緑色のボックス）。ただし、必要なフィールドが少なくとも空でない場合にのみ、送信ボタン（以下のマークアップ）をクリック可能にします。必須のフィールドが空白のときにボタンが無効になる
<button type="submit" name="finish" class="waves-effect waves-light btn">
よろしく
すぐに入力の変化を反映し、任意の入力が空であるかどうかを確認するoninputを使用してください。
HTML
<form id="frm">
<input type="text" name="input1" oninput="testFinish();" />
<input type="text" name="input2" oninput="testFinish();" />
<button type="submit" name="finish" disabled onsubmit="alert('SUBMITTED')">Finish</button>
</form>
JAVASCRIPT
function testFinish(){
var frm = document.getElementById('frm');
if (frm['input1'].value && frm['input2'].value)
frm['finish'].disabled = false;
}
@doeそれはあなたが知っている一般的ではない.. –
私は今、私のデスクトップ上にないんだけど、私はあなたがあなたがcomment..donでより多くの支援の言及が必要..if」を実行するために必要なものだけで基本的なレイアウトを提供していますティックを忘れないでください。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>質問には関係ありません。フォームが有効になるまで**ボタンを無効にしたいと考えています。 –
私は他の人と同じように私の他の口座に答えました。 –
私は..let me rephraseを参照してください –
私はここで私は、テンプレート内でダイビングをしたくないため、簡単なデモを投稿してください。
ロジックは単純です。入力のイベントchangeとkeypressを「聴いて」、それが有効かどうかを確認する必要があります（最後のChromeでコードをテストしました。この検証APIを他のブラウザでチェックするか、独自のライブラリを作成するかライブラリを使用する必要があります）。その場合は、属性disabledを削除し、追加します。
var inputs = document.querySelectorAll('input'),
button = document.querySelector('button');
addListenerMulti(inputs, 'keyup change', function() {
if (valid()) {
button.removeAttribute('disabled');
}
else {
button.setAttribute('disabled', 'disabled');
}
});
function valid() {
var valid = true;
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].validity.valid) {
valid = false;
}
}
return valid;
}
function addListenerMulti(el, s, fn) {
var col = el.length ? el : [el];
var evts = s.split(' ');
for (var k = 0; k < col.length; k++) {
for (var i = 0, iLen = evts.length; i < iLen; i++) {
col[k].addEventListener(evts[i], fn, false);
}
}
}<form>
<input type="text" required /><br />
<input type="text" required /><br />
<button disabled>Submit</button>
</form>すべての入力フィールドは空でなくてもかまいません。 –
私はあなたのためにすべての入力をシミュレートするとは思っていません。答えはほんの指向です。 –
ベロHTMLとJavaScriptコードは試してみてください。
<form id="my-form">
<input type="text" name="input1" class="required abc" />
<input type="text" name="input2" class=" abc" />
<input type="text" name="input3" class="required abc" />
<input type="text" name="input4" class=" abc" />
<input type="text" name="input5" class="abc" />
<button type="submit" name="finish" onsubmit="alert('SUBMITTED')">Finish</button>
</form>
のJavaスクリプトコード：
$(document).ready(function(){
$("form input").blur(function(){
var has_error = false;
$("form input.required").each(function(){
if($(this).val() == ''){
$(this).css('border','1px solid red');
has_error = true;
}
else{
$(this).css('border','');
}
});
if(has_error == false){
$("form button[name='finish']").prop('disabled', false);
}
else {
$("form button[name='finish']").prop('disabled',true);
}
});
});
チェックFiddle詳細については、
何らかの理由を明示せずにダウンボウリングしてくれてありがとう。 – doe
ボタンを無効にし、各入力に 'onchange'イベントなどがあるかどうかを確認し、すべての入力が空でないかどうかを確認し、無効になっている場合はそれを削除し、それ以外の場合は追加/保持します。あなたはまた、提出イベントで同じことをしたいでしょう。 –
私はダウン投票していませんが、私は理由を見ることができます。あなた自身で問題を解決しようとしていないように見えるという事実から始まります。持っている場合は、コードを組み込みます。 –