Question

我试图通过添加错误消息强制<select id="jobCategory">和作业<select id="industry">字段。

不确定是否必须禁用它们才能正确执行。

我的if语句对两个字段都不起作用。
红色的错误消息不显示。

＆＃13;

var maleFemale = '';

$('#submitBtn').click(function() {


  var errors = false;
  if (maleFemale == '') {
    errors = true;
    $('#areYou').css('color', '#F00');
  } else {
    $('#areYou').css('color', '#000');
  }
  if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '@yourname' || $("#twitterInput").val() == '@') {
    errors = true;
    $('#enterTwitterHandle').css('color', '#F00');
  } else {
    $('#enterTwitterHandle').css('color', '#000');
  }



  if ($('#jobCategory option:selected').length == 0) {
    alert('nothing selected');
    $('#enterCategory').css('color', '#F00');
  } else {
    $('#enterCategory').css('color', '#000');
  }

  if ($('#industry option:selected').length == 0) {
    alert('nothing selected');
    $('#enterIndustry').css('color', '#F00');
  } else {
    $('#enterIndustry').css('color', '#000');
  }

  if (!errors) {
    $('body').addClass('submitted');
  }
});

＆＃13;

#submitBtn {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
  <p id='areYou'>Are you...</p>
  <div id='maleFemaleSelector'>
    <p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
    <p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
    <div style='clear:both'></div>
  </div>

  <p id='enterTwitterHandle'>Enter a Twitter handle</p>
  <input type='text' id='twitterInput' value='@yourname' />
  <div style='clear:both'></div>

  <p id='enterCategory'>Select your job category</p>
  <select id="jobCategory" class="select">
    <option value="" disabled selected>job category</option>
    <option value="it"> IT</option>
    <option value="finance">Finance</option>
    <option value="hr">HR</option>
    <option value="marketing">Marketing</option>
    <option value="security">Security</option>
    <option value="developer">Developer</option>
    <option value="others">Others</option>
  </select>

  <div style='clear:both'></div>


  <p id='enterIndustry'>Select your industry</p>
  <select id="industry" class="select">
    <option value="" disabled selected>industry</option>
    <option value="retail">Retail</option>
    <option value="travel-transportation">Travel & Transportation</option>
    <option value="telco-media">Telco / Media</option>
    <option value="banking">Banking</option>
    <option value="health-government">Health & Government</option>
    <option value="energy-utilities">Energy & Utilities</option>

  </select>

  <p id='submitBtn'>Discover your AI iD</p>
  <div style='clear:both'></div>
</div>

＆＃13;

Answer 1

如果你改变：

if ($('#jobCategory option:selected').length == 0) {

到

if ($('#jobCategory option:selected').val() == '') {

和

if ($('#industry option:selected').length == 0)

到

if ($('#industry option:selected').val() == '')

这应该有效。

原始版本找到长度== '12'（不是0），因为该选项中的文字是＆＃39;作业类别＆＃39;这是12个字符长。

新的将搜索值，而只搜索== '' <option value="" disabled selected>job category</option>基本上没有选择。

工作示例：

＆＃13;

var maleFemale = '';

$('#submitBtn').click(function() {


  var errors = false;
  if (maleFemale == '') {
    errors = true;
    $('#areYou').css('color', '#F00');
  } else {
    $('#areYou').css('color', '#000');
  }
  if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '@yourname' || $("#twitterInput").val() == '@') {
    errors = true;
    $('#enterTwitterHandle').css('color', '#F00');
  } else {
    $('#enterTwitterHandle').css('color', '#000');
  }



  if ($('#jobCategory option:selected').val() == '') {
    alert('nothing selected');
    $('#enterCategory').css('color', '#F00');
  } else {
    $('#enterCategory').css('color', '#000');
  }

  if ($('#industry option:selected').val() == '') {
    alert('nothing selected');
    $('#enterIndustry').css('color', '#F00');
  } else {
    $('#enterIndustry').css('color', '#000');
  }

  if (!errors) {
    $('body').addClass('submitted');
  }
});

＆＃13;

#submitBtn {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
  <p id='areYou'>Are you...</p>
  <div id='maleFemaleSelector'>
    <p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
    <p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
    <div style='clear:both'></div>
  </div>

  <p id='enterTwitterHandle'>Enter a Twitter handle</p>
  <input type='text' id='twitterInput' value='@yourname' />
  <div style='clear:both'></div>

  <p id='enterCategory'>Select your job category</p>
  <select id="jobCategory" class="select">
    <option value="" disabled selected>job category</option>
    <option value="it"> IT</option>
    <option value="finance">Finance</option>
    <option value="hr">HR</option>
    <option value="marketing">Marketing</option>
    <option value="security">Security</option>
    <option value="developer">Developer</option>
    <option value="others">Others</option>
  </select>

  <div style='clear:both'></div>


  <p id='enterIndustry'>Select your industry</p>
  <select id="industry" class="select">
    <option value="" disabled selected>industry</option>
    <option value="retail">Retail</option>
    <option value="travel-transportation">Travel & Transportation</option>
    <option value="telco-media">Telco / Media</option>
    <option value="banking">Banking</option>
    <option value="health-government">Health & Government</option>
    <option value="energy-utilities">Energy & Utilities</option>

  </select>

  <p id='submitBtn'>Discover your AI iD</p>
  <div style='clear:both'></div>
</div>

＆＃13;

另一种选择（但不推荐）是在选项中搜索文本本身：选中。

像这样：

if ($('#jobCategory option:selected').text == 'job category') {

jQuery如果未选择select，则添加错误

1 个答案: