Question

我有一个观点，添加到电子有2个radiobuttons是和＆amp;没有。并提交按钮。当点击是radiobutton时。数量文本框不应为空。但如果没有点击单选按钮，它可以为空。单击提交按钮并选择是“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

您有几个问题

不传递_this它不是有效变量
你只测试一个收音机 - 所以“不”永远不会删除所需的
您的HTML无效 - 您需要关闭表单，并且在</html>

</body>

如果您不希望输入为空，则必须删除所需的

这是一个工作且不引人注目的版本。如果您决定使用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和我建议使用复选框，我会将数量隐藏到：

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

您只调用验证功能第一个单选按钮，只需在两个单选按钮上调用它。或者您可以使用jQuery将事件添加到单选按钮。还有一件事是你的表单中没有指定单选按钮添加一个用于向服务器发送数据的名称。

＆＃13;

Get-AzureADUserLicenseDetail

＆＃13;

$(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");
    }
  });
});

＆＃13;

Answer 3

您需要为文本框添加验证是否为空

＆＃13;

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");
  }
}

＆＃13;

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

＆＃13;

Answer 4

错字：onclick="validate(_this)这应该是onclick="validate(this)"

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我可以说你发布的代码可以很好地进行小改动

＆＃13;

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");
    }
}

＆＃13;

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

＆＃13;

您错过了id和<button>属性的双引号。
您错过了</form>关闭标记
validate(_this)必须为validate(this)
$('#dir').attr('required');应为$('#dir').attr('required', boolean_value);

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

5 个答案: