[英]Jquery If radio button is clicked, require email field
Here is my problem. 这是我的问题。
I have a razor generated form that has multiple fields but I want email to only be required if the System Admin radio button is clicked. 我有一个由剃刀生成的具有多个字段的表单,但我希望仅在单击“系统管理员”单选按钮时才需要电子邮件。 It is defaulted to system user.
默认为系统用户。
<div class="">@Html.LabelFor(m => m.Email)</div>
<div class="">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control required", placeholder = "Email" })
@Html.ValidationMessageFor(m => m.Email)
</div>
I even tried removing the "required" after form control and taking out the validation. 我什至尝试过在表单控制后删除“必需”并进行验证。
I have 2 radio buttons that are generated by razor that have the same name but different values. 我有2个由剃须刀生成的单选按钮,它们具有相同的名称但值不同。
<div class="inline-editor create-user-roles">
<input id="UserRole" name="UserRole" type="radio" value="System Administrator">
<input id="UserRole" name="UserRole" type="radio" value="System User">
</div>
Here is the JQuery function that I am trying to use. 这是我要使用的JQuery函数。
$('input[name="UserRole"]').on('change', function () {
if ($('input[name="UserRole"]:checked').val() == "System Administrator") {
$('#Email').rules('add', {
required: true, messages: { required: "This field is required" }
});
}
else {
$('#Email').rules('add', {
required: false
});
}
});
I'm assuming you are using jQueryValidation [ from the syntax ]. 我假设您正在使用jQueryValidation [ 从语法上 ]。 Changing your code to the following should do the trick:
将代码更改为以下代码可以解决问题:
$('input[name="UserRole"]').on('change', function () {
if ($(this).is(':checked') && $(this).val() == "System Administrator") { // `this` refers to the current element that has raised the event, i.e. shorter for `input[name="UserRole"]` in this case
$('#Email').rules('add', {
required: true, messages: { required: "This field is required" }
});
}
else {
$('#Email').rules('remove'); // Take note of this part
}
});
Notice that you need to remove the rule. 请注意,您需要 删除 规则。 Specifying
false
on a particular rule will not have any effect on removing it. 在特定规则上指定
false
不会将其删除。
Update: Using the .rules()
method on form elements requires that you have already invoked the .validate()
method [ with an empty object ] on the form. 更新:在表单元素上使用
.rules()
方法要求您已经在表单上调用了[ .validate()
方法[ 带空对象 ]。
That is, add the following line before the above block of code: 也就是说,在上述代码块之前添加以下行:
$('#yourFormId').validate({});
//rest of your code where you can add your validation rules with `.rule()`.
Okay so I figured it out. 好吧,我明白了。 I found a simpler way of doing it that solved all my problems.
我找到了一种解决所有问题的简单方法。 Here is is!
这是!
$('input[name="UserRole"]').on('change', function () {
if ($('input[name="UserRole"]:checked').val() == "System Administrator") {
$("#Email").removeClass('form-control').addClass('form-control required');
}
else {
$("#Email").removeClass('form-control required').addClass('form-control');
$("span[for^='Email']").remove();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.