每次更改输入时调用 if 语句

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

为什么不使用 required 属性？这是一个链接http://www.w3schools.com/tags/att_input_required.asp http://www.w3schools.com/tags/att_select_required.asp

如果您想要更复杂的验证，请查看此 https://jqueryvalidation.org/

Answer 3

多个选择器应该用引号括起来并用逗号分隔(,)

jQuery( "selector1, selector2, selectorN" )

注意：还要将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 4

编写验证函数，如果所有条件都满足则返回 true，否则返回 false。然后单击运行该函数，如果它返回 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 5

从问题陈述来看，您似乎在初始页面加载期间寻找disablesubmit，并且如果未选择所有字段并仅启用它如果选择了所有字段。

因此，如果是这种情况，您首先需要禁用提交按钮。

为此，您可以使用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 用于演示