每次輸入更改時都會調用語句

Question

我想使用戶在我的表單中無法單擊提交按鈕，直到每個字段都有選項被選中。我最初嘗試了這個while循環，並創建了一個無限循環。我將它轉換爲if語句並添加了代碼以在每次窗體上的某些內容發生更改時調用if語句，但仍然無法使提交按鈕變爲可點擊。

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

一個更好的和更短的方式來完成你的任務。

$('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

如果你想更復雜的驗證，看看這個 https://jqueryvalidation.org/

Answer 3

寫入驗證功能，如果所有條件都滿足，或者如果不假返回true。然後點擊運行函數，如果返回true，則做form.submit（）

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

多個選擇，我們應該包裹在一個報價，並用逗號（,）

分離

jQuery("selector1, selector2, selectorN")

不E：另外在引號包裹attribute的value（"）

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

從問題的陳述，看來你正在尋找disable並且如果所有字段都沒有選擇 &的submit期間初始頁面加載啓用它只有所有字段選中。

所以如果是這樣你最初需要禁用提交按鈕。可以使用disabled屬性。

這裏是我做

HTML

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

CSS

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

變化JS

// function which will validate every field 
function _validateFields(){ 
    var _textField = $('input[type=text]').val(); 
    var _secondField = $('input[name=class]').is(":checked"); 
    var _thirdField = $('input[name=race]').is(":checked"); 
    if((_textField === undefined || _textField ==="") || _secondField == false || _thirdField == false){ 
    return false; 
    } 
    else{ 
    return true; 
    } 
} 


$('input[name="user"],input[name="race"],input[name="class"]').on('change keyup',function() { 
    if(_validateFields()){ 
    $(' input[type="submit"]').attr("disabled",false).removeClass('disableSubmit'); 
    } 
    else{ 
    $('input[type="submit"]').attr("disabled",true).addClass('disableSubmit'); 
    } 
}) 

Plunker用於演示