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

Call if statement every time an input is changed

本文关键字：调用 if 语句 输入      更新时间：2023-09-26

我想在我的表单中，在每个字段都选择选项之前，用户无法单击提交按钮。我最初尝试使用while循环，它创建了一个无限循环。我将其转换为 if 语句，并添加了代码以在每次更改表单上的某些内容时调用 if 语句，但提交按钮仍然永远不会变得可单击。

演示

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');
    }
});

一种更好、更短的方式来完成你的任务。

$('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.
   }
});

演示

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

如果你想要更复杂的验证，看看这个https://jqueryvalidation.org/

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

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>

编写验证函数，如果满足所有条件，则返回 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();
  
  }
});

从问题陈述中，您似乎希望在初始页面加载期间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

相关文章：