所选optiong值的jquery验证警报

时间:2018-05-31 08:38:42

标签: javascript jquery html css validation

我正在尝试验证组合框,就像下面的代码一样,即使有一个条件成立,我也会得到一些警告信息。我需要只发出一个警报,即使一个条件是真的,其他条件应该是红色的。谢谢

$(function() {
  $('#issue-form input[type="submit"]').click(function() {
    var TrackID = $('#issue_status_id').val();
    var IssueCF = $('#issue_custom_field_values_55').val();

    if (TrackID == '3' && IssueCF == '157') {
      alert("Please select an option!");
      $("#issue_custom_field_values_55").css("border", "2px solid red");
      return false;
    }
  });
});


$(function() {
  $('#issue-form input[type="submit"]').click(function() {
    var TrackID = $('#issue_status_id').val();
    var IssueCF = $('#issue_custom_field_values_52').val();

    if (TrackID == '3' && IssueCF == '156') {
      alert("Please select an option!");
      $("#issue_custom_field_values_52").css("border", "2px solid red");
      return false;
    }
  });
});

$(function() {
  $('#issue-form input[type="submit"]').click(function() {
    var TrackID = $('#issue_status_id').val();
    var IssueCF = $('#issue_custom_field_values_56').val();

    if (TrackID == '3' && IssueCF == '158') {
      alert("Please select an option!");
      $("#issue_custom_field_values_56").css("border", "2px solid red");
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
  <div class="splitcontent">
    <p>
      <select name="issue[status_id]" id="issue_status_id">
        <option value="1">New</option>
        <option value="2">In Progress</option>
        <option selected="selected" value="3">Solved</option>
        <option value="4">Feedback</option>
        <option value="5">End</option>
        <option value="6">Rejected</option>
      </select>

      <p><label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
        <select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
          <option value="">--- Please select ---</option>
          <option selected="selected" value="55">Software Bug</option>
          <option value="56">Enviromental Bug </option>
          <option value="58">Other Factors</option>
        </select>
      </p>

      <p style="display: block;"><label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
        <select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
          <option value="">&nbsp;</option>
          <option selected="selected" value="156">--- 未選択/not entered ---</option>
          <option value="59">1A.BI</option>
          <option value="60">1B.BD</option>
          <option value="61">1C.DD</option>
          <option value="62">1D.PD</option>
          <option value="63">1E.C</option>
        </select>
      </p>

      <p style="display: block;"><label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
        <select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
          <option value="">&nbsp;</option>
          <option selected="selected" value="157">--- 未選択/not entered ---</option>
          <option value="79">Poor Quality</option>
          <option value="80">Not Reviewed</option>
          <option value="81">Review Point Leak</option>
          <option value="82">Review, Correction &amp; Confirmation</option>
          <option value="83">Lack of Communication</option>
          <option value="84">Other</option>
          <option value="85">Not Applicable</option>
        </select>
      </p>


      <p style="display: block;"><label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
        <select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
          <option value="">&nbsp;</option>
          <option selected="selected" value="158">--- 未選択/not entered ---</option>
          <option value="86">UT</option>
          <option value="87">SI1</option>
          <option value="88">SI2</option>
          <option value="89">PT</option>
          <option value="90">RT</option>
        </select>
      </p>

  </div>

</form>
<input type="submit" name="commit" value="Create">

当使用选项选择了第一个其他值时,我需要使用警报消息得到这样的结果。我需要以下javascript代码更改的帮助。谢谢

3 个答案:

答案 0 :(得分:1)

我分析了你的java脚本,发现你的逻辑需要进行一些更改,如下所示 -

&#13;
&#13;
$(function () {
            $('#issue-form input[type="submit"]').click(function () {
                var TrackID = $('#issue_status_id').val();
                var IssueCF = $('#issue_custom_field_values_55').val();
                var isAlert = 0;
                if (TrackID == '3' && IssueCF == '157') {
                    isAlert = 1;
                    $("#issue_custom_field_values_55").css("border", "2px solid red");
                }

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_52').val();

                if (TrackID == '3' && IssueCF == '156') {
                    isAlert = 1;
                    $("#issue_custom_field_values_52").css("border", "2px solid red");

                }

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_56').val();

                if (TrackID == '3' && IssueCF == '158') {
                    isAlert = 1;
                    $("#issue_custom_field_values_56").css("border", "2px solid red");
                }
                if (isAlert == "1") {
                    alert("Please select an option!");
                    return false;
                }
            });
        });
&#13;
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
        <div class="splitcontent">
            <p>
                <select name="issue[status_id]" id="issue_status_id">
                    <option value="1">New</option>
                    <option value="2">In Progress</option>
                    <option selected="selected" value="3">Solved</option>
                    <option value="4">Feedback</option>
                    <option value="5">End</option>
                    <option value="6">Rejected</option>
                </select>

                <p>
                    <label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
                    <select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
                        <option value="">--- Please select ---</option>
                        <option selected="selected" value="55">Software Bug</option>
                        <option value="56">Enviromental Bug </option>
                        <option value="58">Other Factors</option>
                    </select>
                </p>

                <p style="display: block;">
                    <label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
                    <select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="156">--- 未選択/not entered ---</option>
                        <option value="59">1A.BI</option>
                        <option value="60">1B.BD</option>
                        <option value="61">1C.DD</option>
                        <option value="62">1D.PD</option>
                        <option value="63">1E.C</option>
                    </select>
                </p>

                <p style="display: block;">
                    <label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
                    <select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="157">--- 未選択/not entered ---</option>
                        <option value="79">Poor Quality</option>
                        <option value="80">Not Reviewed</option>
                        <option value="81">Review Point Leak</option>
                        <option value="82">Review, Correction &amp; Confirmation</option>
                        <option value="83">Lack of Communication</option>
                        <option value="84">Other</option>
                        <option value="85">Not Applicable</option>
                    </select>
                </p>


                <p style="display: block;">
                    <label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
                    <select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="158">--- 未選択/not entered ---</option>
                        <option value="86">UT</option>
                        <option value="87">SI1</option>
                        <option value="88">SI2</option>
                        <option value="89">PT</option>
                        <option value="90">RT</option>
                    </select>
                </p>
        </div>
        <input type="submit" name="commit" value="Create">
    </form>
    </body>
    </html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

在这种情况下使用下面给出的代码。如果它适合你,请喜欢我的个人资料。

&#13;
&#13;
<script type="text/javascript">
        $(function () {
            $('#issue-form input[type="submit"]').click(function () {
                var TrackID = $('#issue_status_id').val();
                var IssueCF = $('#issue_custom_field_values_55').val();
                var isAlert = 0;
                if (TrackID == '3' && IssueCF == '157') {
                    isAlert = 1;
                    $("#issue_custom_field_values_55").css("border", "2px solid red");
                } else {
                    $("#issue_custom_field_values_55").css("border", "none");
                }

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_52').val();

                if (TrackID == '3' && IssueCF == '156') {
                    isAlert = 1;
                    $("#issue_custom_field_values_52").css("border", "2px solid red");
                } else {
                    $("#issue_custom_field_values_52").css("border", "none");
                }

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_56').val();

                if (TrackID == '3' && IssueCF == '158') {
                    isAlert = 1;
                    $("#issue_custom_field_values_56").css("border", "2px solid red");
                } else {
                    $("#issue_custom_field_values_56").css("border", "none");
                }
                if (isAlert == "1") {
                    alert("Please select an option!");
                    return false;
                }
            });
        });

    </script>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

使用下面给出的代码删除边框-

$(function () {
            $('#issue-form input[type="submit"]').click(function () {
                var TrackID = $('#issue_status_id').val();
                var IssueCF = $('#issue_custom_field_values_55').val();
                var isAlert = 0;
                if (TrackID == '3' && IssueCF == '157') {
                    isAlert = 1;
                    $("#issue_custom_field_values_55").css("border", "2px solid red");
                }
				else{
				$("#issue_custom_field_values_55").css("border", "none");
				}

                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_52').val();

                if (TrackID == '3' && IssueCF == '156') {
                    isAlert = 1;
                    $("#issue_custom_field_values_52").css("border", "2px solid red");

                }
else{
$("#issue_custom_field_values_52").css("border", "none");
}
                TrackID = $('#issue_status_id').val();
                IssueCF = $('#issue_custom_field_values_56').val();

                if (TrackID == '3' && IssueCF == '158') {
                    isAlert = 1;
                    $("#issue_custom_field_values_56").css("border", "2px solid red");
                }else
				{
					$("#issue_custom_field_values_56").css("border", "none");
				}
                if (isAlert == "1") {
                    alert("Please select an option!");
                    return false;
                }
            });
        });
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
        <div class="splitcontent">
            <p>
                <select name="issue[status_id]" id="issue_status_id">
                    <option value="1">New</option>
                    <option value="2">In Progress</option>
                    <option selected="selected" value="3">Solved</option>
                    <option value="4">Feedback</option>
                    <option value="5">End</option>
                    <option value="6">Rejected</option>
                </select>

                <p>
                    <label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
                    <select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
                        <option value="">--- Please select ---</option>
                        <option selected="selected" value="55">Software Bug</option>
                        <option value="56">Enviromental Bug </option>
                        <option value="58">Other Factors</option>
                    </select>
                </p>

                <p style="display: block;">
                    <label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
                    <select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="156">--- 未選択/not entered ---</option>
                        <option value="59">1A.BI</option>
                        <option value="60">1B.BD</option>
                        <option value="61">1C.DD</option>
                        <option value="62">1D.PD</option>
                        <option value="63">1E.C</option>
                    </select>
                </p>

                <p style="display: block;">
                    <label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
                    <select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="157">--- 未選択/not entered ---</option>
                        <option value="79">Poor Quality</option>
                        <option value="80">Not Reviewed</option>
                        <option value="81">Review Point Leak</option>
                        <option value="82">Review, Correction &amp; Confirmation</option>
                        <option value="83">Lack of Communication</option>
                        <option value="84">Other</option>
                        <option value="85">Not Applicable</option>
                    </select>
                </p>


                <p style="display: block;">
                    <label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
                    <select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
                        <option value="">&nbsp;</option>
                        <option selected="selected" value="158">--- 未選択/not entered ---</option>
                        <option value="86">UT</option>
                        <option value="87">SI1</option>
                        <option value="88">SI2</option>
                        <option value="89">PT</option>
                        <option value="90">RT</option>
                    </select>
                </p>
        </div>
        <input type="submit" name="commit" value="Create">
    </form>
    </body>
    </html>