Question

我有一个观点，添加到电子有2个radiobuttons是和＆amp;没有。并提交按钮。当点击radiobutton时。数量文本框不应该为空。但如果没有单击单选按钮，它可以为空。当单击提交按钮时，此功能应该有效，选择是无线电按钮。任何想法？我的观点：

 <HTML>
    <head>
    radio
    </head>
    <body>
    <form id=radio>
     Add to electronic  <input type="radio" name="yes"onclick="validate(_this)"id="yes"/>Yes<input type="radio" name="yes" id="no" />No<br />
    <label>Quantity</label><input type="text"size="25"name="dir"id="dir" required/> 
<button type=submit name=insert>insert</button>
</body>
<div>
<script src="~/Scripts/radiobuttonvalidation.js"></script>
</div>
</html>

我对mvc和javascript的新手也帮助我使用javascript代码。以及我应该将它与我的视图链接的方式。使用Javascript：

    function validate(_this) {
    if ($(_this).attr('id') == "yes") {
        $('#dir').attr('required');
        alert("Text Box required");
    }
    else {
        $('#dir').removeAttr('required');
        alert("Text Box not required");
    }
}

Answer 1

$(function() {
  $("#radio").submit(function() {
    if ($('#yes').is(':checked') && !$.trim($('#quantity').val())) {
      alert("Please input the quantity.");
      return false;
    }
  });
});

    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        </head>
        <body>
            <form id=radio>
                Add to electronic <input type="radio" name="yes" id="yes" />Yes<input type="radio" name="yes" id="no" />No<br />
                <label>Quantity</label><input type="text" size="25" name="quantity" id="quantity" />
                <button type=submit name=insert>insert</button>
            </form>
        </body>
    </html>

Answer 2

HTML Required属性在这种情况下非常有用。有关详细信息，请参阅此Link。另外，如果您需要更多自定义，请检查Jquery Validator。

<HTML>
    <head>
    radio
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
        function validate(_this)
        {
           if($(_this).attr('id') == "yes")
            {
                $('#quantity').attr('required');
                alert("Text Box required");
             }
            else
             {
                 $('#quantity').removeAttr('required');
                 alert("Text Box not required");
             }
        }
        
      </script>
    </head>
    <body>
    <form id=radio>
     Add to electronic  
     <input type="radio" name="yes" id="yes" onchange="validate(this)"/>Yes
     <input type="radio" name="yes" id="no" onchange="validate(this)"/>No<br />
    <label>Quantity</label>
    <input type="text"size="25" name="quantity"id="quantity" required/> 
    <button type=submit name=insert>insert</button>
</body>
</html>

单击单选按钮时必须使用文本框

2 个答案: