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

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

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

Answer 2

我们应该在引号中包含多个选择器，并用逗号（,）

分隔

jQuery( "selector1, selector2, selectorN" )

注意：同时将value的{{1}}包裹在引号（attribute）

中

"

＆＃13;

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

Answer 3

完成任务的更好，更短的方式。

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

从问题陈述来看，您似乎期望在初始页面加载期间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用于演示

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

5 个答案: