选择单选按钮时必须输入文本框

Question

I have a view where add to electronic has 2 radiobuttons yes & no. 我有一个视图，其中添加到电子有2个单选按钮，是＆否。 And a submit button. 还有一个提交按钮。 When yes radiobutton is clicked. 如果是，则单击单选按钮。 the quantity textbox should not be empty. 数量文本框不能为空。 But it can be empty if no radiobutton is clicked. 但是，如果未单击任何单选按钮，则可以为空。 This functionality should work when submit button is clicked with yes radiobutton is selected. 单击提交按钮并选择是单选按钮时，此功能应起作用。

 <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>

I'm new to mvc and javascript. 我是mvc和javascript的新手。 Please help me with javascript code too, and the way i should link it with my view. 请也用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

You have several issues 你有几个问题

do not pass _this it is not a valid variable 不要传递_this不是有效变量
you only test one radio - so the "no" never removes the required 您只测试一台收音机-因此“否”永远不会删除所需的
your HTML is invalid - you need to close the form and not have any html other than </html> after the </body> 您的HTML是无效的-你需要关闭窗体并没有其他任何HTML不是</html>后</body>
You must remove the required if you want the input to be allowed empty if neither are checked 如果要检查输入是否为空，则必须删除必填项

Here is a working and unobtrusive version. 这是一个正常工作的版本。 If you decide to use jQuery you have no reasons left to use inline event handlers 如果您决定使用jQuery，则没有理由使用内联事件处理程序

 $(function() { $("[name='yes']").on("click", function() { if (this.id == "yes") { $('#dir').attr('required', true); console.log("Text Box required"); } else { $('#dir').removeAttr('required'); console.log("Text Box not required"); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <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="dir" id="dir" /> <button type=submit name=insert>insert</button> </form>

RobG and I suggest to use a checkbox and I would hide the quantity to: RobG和我建议使用复选框，然后将数量隐藏为：

 function validate() { var $check = $("#addToElectronic"), checked = $check.is(":checked"); $("#quant").toggle(checked); $('#dir').attr('required', checked); } $(function() { $("#addToElectronic").on("click",validate); validate(); });

 #quant { display:none }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form id=radio> Add to electronic <input type="checkbox" id="addToElectronic" value="yes" />Yes<br/> <div id="quant"> <label>Quantity</label><input type="text" size="25" name="dir" id="dir" /> </div> <button type=submit name=insert>insert</button> </form>

Answer 2

You are calling your validate function only first radio button just call it on both radio button. 您仅在第一个单选按钮上调用了validate函数，而在两个单选按钮上都调用了它。 Or you can use jQuery to add event to your radio buttons. 或者，您可以使用jQuery将事件添加到您的单选按钮。 One more thing there is no name specified in your form for radio button add one for sending data to server. 还有一件事，您的表单中没有为单选按钮指定名称，添加了一个用于向服务器发送数据的名称。

 $(function(){ $("input[name=add_to_ele]").change(function(){ if($(this).val()=="yes") { $('#dir').attr('required','required'); alert("Text Box required"); } else { $('#dir').removeAttr('required'); alert("Text Box not required"); } }); });

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

Answer 3

you need to add validation for text box is empty or not 您需要为文本框是否为空添加验证

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> </form>

Answer 4

Typo: onclick="validate(_this) this should be onclick="validate(this)" onclick="validate(_this) ： onclick="validate(_this)这应该是onclick="validate(this)"

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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"/> <button type=submit name=insert>insert</button> </body>

Answer 5

I can say that the code you have posted works fine with small changes 我可以说您发布的代码只要稍作更改就可以正常工作

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

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

You have missed double quotes in form id and <button> attributes. 您已经错过了表单id和<button>属性中的双引号。
You have missed </form> close tag 您错过了</form>关闭标签
validate(_this) inside the radio input must be validate(this) 无线电输入中的validate(_this)必须为validate(this)
$('#dir').attr('required'); should be $('#dir').attr('required', boolean_value); 应该是$('#dir').attr('required', boolean_value);

选择单选按钮时必须输入文本框

问题描述

5 个解决方案

解决方案1
1 2017-07-06 06:29:03

解决方案2
0 2017-07-06 06:20:39

解决方案3
0 2017-07-06 06:27:30

解决方案4
0 2017-07-06 06:27:31

解决方案5
0 2017-07-06 06:36:58

选择单选按钮时必须输入文本框

问题描述

5 个解决方案

解决方案1 1 2017-07-06 06:29:03

解决方案2 0 2017-07-06 06:20:39

解决方案3 0 2017-07-06 06:27:30

解决方案4 0 2017-07-06 06:27:31

解决方案5 0 2017-07-06 06:36:58

解决方案1
1 2017-07-06 06:29:03

解决方案2
0 2017-07-06 06:20:39

解决方案3
0 2017-07-06 06:27:30

解决方案4
0 2017-07-06 06:27:31

解决方案5
0 2017-07-06 06:36:58