入力が変更されるたびにifステートメントを呼び出す

Question

すべてのフィールドにオプションが選択されるまで、ユーザーは送信ボタンをクリックできないようにします。私はもともとこれをwhileループで試して、無限ループを作成しました。私はそれをifステートメントに変換し、フォーム上の何かが変更されるたびにifステートメントを呼び出すコードを追加しましたが、依然としてsubmitボタンは決してクリック可能になりません。必須属性を使用しない理由

DEMO

if(($('input[type=text]').val() === '') || (!($('input[name=class]').is(':checked'))) || (!($('input[name=race]').is(':checked')))) { 
    $(' input[type=submit]').css('pointer-events', 'none'); 
} 
else{ 
    $(' input[type=submit]').css('pointer-events', 'auto'); 
} 

$('input[name=user]', 'input[name=race]', 'input[name=class]').change(function(){ 
    if(($('input[type=text]').val() === '') || (!($('input[name=class]').is(':checked'))) || (!($('input[name=race]').is(':checked')))) { 
     $(' input[type=submit]').css('pointer-events', 'none'); 
    } 
    else{ 
     $(' input[type=submit]').css('pointer-events', 'auto'); 
    } 
}); 

Answer 1

のvalueあなたのタスクを達成するためのより良いと短い方法を包みます。

$('form#newPlayer').submit(function(){ // bind form submit event 
    if($('input:text').val() == "" || !$('input[name="class"]:checked').length || !$('input[name="race"]:checked').length) 
    { 
    alert("all fields required"); 
    return false; // prevent form submission. 
    } 
}); 

DEMO

Answer 2

？あなたはより洗練された検証をしたい場合はここでリンクhttp://www.w3schools.com/tags/att_input_required.asp http://www.w3schools.com/tags/att_select_required.asp

で、すべての条件が満たされていないか場合はfalseされている場合はtrueを返し、この https://jqueryvalidation.org/

Answer 3

書き込み検証機能を見てみましょう。

function validateData() { 
 
    
 
    var result = true; 
 
    
 
    if(!$('.yourinput1').val()) { 
 
    result = false; 
 
    } 
 
    
 
    if(!$('.yourinput2').val()) { 
 
    result = false; 
 
    } 
 
     
 
    
 
    return result; 
 
    
 
    } 
 

 

 

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

 
    if(validateData()) { 
 
    
 
    $('#yourForm').submit(); 
 
    
 
    } 
 

 

 
});

Answer 4

複数のセレクタは、我々は引用符で包み、カンマ（,）で区切ら

必要があります）、[OK]をクリックします上の関数を実行し、それがtrueを返した場合、その後（form.submitを行います

jQuery("selector1, selector2, selectorN")

ありませんE：も引用符でattribute（"）

jQuery("[attribute='value']")

if (($('input[type="text"]').val() === '') || (!($('input[name="class"]').is(':checked'))) || (!($('input[name="race"]').is(':checked')))) { 
 
    $(' input[type="submit"]').css('pointer-events', 'none'); 
 
} else { 
 
    $(' input[type="submit"]').css('pointer-events', ''); 
 
} 
 
$('input[name="user"],input[name="race"],input[name="class"]').change(function() { 
 
    if (($('input[type="text"]').val() === '') || (!($('input[name="class"]').is(':checked'))) || (!($('input[name="race"]').is(':checked')))) { 
 
    $(' input[type="submit"]').css('pointer-events', 'none'); 
 
    } else { 
 
    $(' input[type="submit"]').css('pointer-events', ''); 
 
    } 
 
});

#newPlayer { 
 
    position: relative; 
 
    top: 20px; 
 
    color: #8b0909; 
 
    background-color: rgba(0, 0, 0, .3); 
 
    width: 350px; 
 
    margin: auto; 
 
    height: 275px; 
 
    border-radius: 5px; 
 
    text-shadow: 1px 1px 1px black; 
 
} 
 
#newPlayer h3 { 
 
    font-size: 20px; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    font-weight: 700; 
 
    padding-bottom: 5px; 
 
} 
 
#newPlayer p { 
 
    max-width: 275px; 
 
    margin: auto; 
 
    margin-top: 5px; 
 
    color: #c10606; 
 
    font-size: 14px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 300; 
 
} 
 
#newPlayer input[type=submit] { 
 
    color: black; 
 
    border-radius: 5px; 
 
    font-family: 'Droid Sans', sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form id="newPlayer"> 
 
    <h3>Username:</h3> 
 
    <input type="text" name="user" /> 
 
    <br> 
 
    <h3>Please Choose a Class:</h3> 
 
    <input type="radio" name="class" value="archer" />Archer 
 
    <input type="radio" name="class" value="mage" />Mage 
 
    <input type="radio" name="class" value="warrior" />Warrior 
 
    <br> 
 
    <h3>Please Choose a Race:</h3> 
 
    <input type="radio" name="race" value="Orc" />Orc 
 
    <input type="radio" name="race" value="Elf" />Elf 
 
    <input type="radio" name="race" value="Human" />Human 
 
    <input type="radio" name="race" value="Worg" />Worg 
 
    <br> 
 
    <input type="submit" value="Submit" /> 
 
    <p id="descript"></p> 
 
</form>

Answer 5

問題の記述から、すべてのフィールドが &を選択されていない場合、すべてのフィールドがある場合にのみ、それを有効にするにも、あなたがsubmit時の初期ページのロードをdisableために探しているようで、を選択しました。

したがって、最初にを無効にする必要がある場合は、送信ボタンをクリックします。

この場合、disabled属性を使用できます。ここで

は

JS私は

HTML

<input type="submit" value="Submit" disabled="true" class = "disableSubmit"/> 

CSS

.disableSubmit{ 
    cursor:no-drop; // this will let user know button cannot be selected 
} 

やった変化であり、他の条件で編集質問@Rayon

Plunker全く他の条件があなたのコードではありませんデモ