How to dynamically display a textbox and make it required based on radiobox selected in my ASP.NET MVC 5 application

Question

So, I am learning basics of Jquery. I have two radioboxes and one textbox, and if "first" radiobox is selected hide the textbox and if "Second" radiobox is selected I want to show a textbox and make it as "Required Field" too at the same time. I tried some solution, but I think I overcomplicated it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>      
<div class="col-md-10">
    <input class="form-control" id="Email" name="Email" type="text" value="">
</div>

Steps I followed to achieve to my solution.

added one class "MyTextBoxClass" to the textbox - [Not sure if it was necessary]
Added "display to none"
Added one class "MyRadioClass" to the radiobox - [Not sure if it was necessary]

<div> <input class="MyRadioClass" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker <input class="MyRadioClass" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar </div>
Added a "CHANGE" event on that MyRadioClass
On change checked the value of the radiobox,
If it is second one then removed the Style attribute so that NONE is taken out and added "Required Attribute"
If it is the first checkbox then add display as none

$('.MyRadioClass').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
    {
        $('.MyTextBoxClass').removeAttr("style");
        $('.MyTextBoxClass #Email').attr('required','required');
    }
    else {
        $('.MyTextBoxClass').css('display', 'none');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10 MyRadioClass">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>
        
<div class="col-md-10 MyTextBoxClass" style="display:none;">
    <input class="form-control" id="Email" name="Email" type="text" value="">
</div>

Question 1. When I submit the form the "Required" attribute is not getting appended. I am able to submit the form without putting any value in the textbox.

Question 2. Is there a more sleek way of doing what I wanted to achieve?

My Actual Code:

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="form-group MyRadioClass">
        <div class="col-md-10">
            @Html.RadioButtonFor(m => m.SelectedRoleType, "JobSeeker", new { @class="js-radio"}) Job Seeker
            @Html.RadioButtonFor(m => m.SelectedRoleType,"Referrer", new { @class="js-radio"}) Referrar
        </div>
    </div>
    <div class="form-group MyTextBoxClass" style = "display:none" ">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type = "submit" class="btn btn-default" value="Register" />
        </div>
    </div>

}
<button class="btn btn-info">
    <i class="fa fa-lg fa-fw fa-facebook"></i>
    facebook
</button>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    $('.MyRadioClass').on('change', function () {
        if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
        {
            $('.MyTextBoxClass').show();
            $('.MyTextBoxClass input').attr('required', true);

        }
        else {
            $('.MyTextBoxClass').hide();
        }
    });

</script>

have you tried with `$('.MyTextBoxClass #Email').attr('required','required');` — Carsten Løvbo Andersen, Aug 16 '17 at 05:13

Vikas · Answer 1 · 2017-08-16T05:56:41.290

2

You're doing it wrong way. You should have a clear understanding of jQuery selectors.

$('.MyTextBoxClass').css('required'); wouldn't work as you're selecting an HTML element, not the input field.

Secondly, .css() is not what you're looking for. Do something like this to make it work:

$(".MyTextBoxClass input").attr("required", true);

And, to show and hide your text input, I recommend using jQuery's show() and hide() methods.

So your code would look like this:

$('.MyRadioClass').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
    {
        $('.MyTextBoxClass').show();
        $('.MyTextBoxClass input').attr('required', true);
    }
    else {
        $('.MyTextBoxClass').hide();
        $('.MyTextBoxClass input').removeAttr('required');
    }
});

If it still doesn't work, let me know.

EDIT: Remove validate tag from your form tag and use jQuery's submit event to solve the issue. Here's a link you may want to read Stop form refreshing page on submit

e.g.,

$(document).ready(function(){
    $('yourForm').removeAttr("novalidate");
});

$('yourForm').on('submit', function(event){
    event.preventDefault();
    //DO STUFF
});

edited Aug 16 '17 at 05:56

answered Aug 16 '17 at 05:15

Vikas

720
1
9
30

This is the inspect element output that is getting generated now. `

` – Unbreakable Aug 16 '17 at 05:20
Still when I submit i do not see any error/validation message. Why so? Why am I still able to submit. Reqired = reuired. why it is not doing what it is supose to do. – Unbreakable Aug 16 '17 at 05:21
Is there any additional steps/plugin required? – Unbreakable Aug 16 '17 at 05:22
Yes. This is what you want? Now, if you will submit form without text in this input, it won't submit. Also, I would like to see how you're submitting form. That will help me see if you're doing things right or not. – Vikas Aug 16 '17 at 05:22
Please post your form submit code. No plugins required. Improvements might be needed. – Vikas Aug 16 '17 at 05:23
What do you see in HTML rendered in console. Is `
` tag generated properly? Without form tags, required wont' work. Can you give a link or attach a screenshot of HTML in console?
– Vikas Aug 16 '17 at 05:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/152004/discussion-between-unbreakable-and-vikas-kumar). – Unbreakable Aug 16 '17 at 05:32
@Unbreakable you need to tell library to update validation rules by `$("form").data("validator", null); $.validator.unobtrusive.parse($("form"));` after adding required attribute – Arjun Vachhani Aug 16 '17 at 05:47

Bilal Hussain · Answer 2 · 2017-08-16T05:32:42.940

1

$('.MyRadioClass').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer")
    {
        $('.MyTextBoxClass').removeAttr("style");
        $('.MyTextBoxClass #Email').attr('required','required');
    }
    else {
        $('.MyTextBoxClass').css('display', 'none');
        
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" type="POST">
<div class="col-md-10 MyRadioClass">
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
    <input class="js-radio" id="SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>
        
<div class="col-md-10 MyTextBoxClass" style="display:none;">
    <input class="form-control" id="Email" name="Email" type="text" value="">
    
    
</div>
<input type="submit" value="test submit">
</form>

Here's your tested working code. Let me know if this worked!

edited Aug 16 '17 at 05:32

answered Aug 16 '17 at 05:23

Bilal Hussain

994
1
10
25

Your solution works, I have added my complete code in the edit section. Why my code does not work. :-| – Unbreakable Aug 16 '17 at 05:30
You need to add attribute like " $('.MyTextBoxClass #Email').attr('required','required');" not this : $('.MyTextBoxClass').css('required'); – Bilal Hussain Aug 16 '17 at 05:34
Bilal, when I inspect element, I am seeing the required attribute set properly. The issus is even then Iam able to submit the form – Unbreakable Aug 16 '17 at 05:49
So, it's not about "Not being able to correctly add the required attrbute. After making some changes to my original code I was able to add the required attribute but still I am able to submit my form. – Unbreakable Aug 16 '17 at 05:50
Okay, Could you please share at what line you are opening and closing form tag? I had to add form tag at the starting point. This could be the issue. – Bilal Hussain Aug 16 '17 at 06:01

score 1 · Accepted Answer · answered Aug 16 '17 at 08:13

Your issue is that your using the jquery.validate.js and jquery.validate.unobtrusive.js libraries for client side validation. These are not compatible with HTML-5 validation (which the required attribute is), and the jquery.validate.js modifies your <form> tag to add the novalidate attribute so your required attribute is ignored.

In order to get both client and server side validation you need to apply a conditional validation attribute. There are plenty of example of these on SO, or you could use foolproof [RequiredIf] attribute. In addition, if you want to learn to write your own I recommend reading The Complete Guide To Validation In ASP.NET MVC 3 - Part 2.

Using the foolproof attribute, your model property will be

[RequiredIf("SelectedRoleType", "Referrer", ErrorMessage = "...")]
public string Email { get; set; }

If you select the 2nd radio button (for 'Referrer') and leave the Email control empty, you submit action will be cancelled and the error message will be displayed in the view.

Then to show/hide the elements associated with the email property, your script should be

$('.MyRadioClass .js-radio').on('change', function () {
    if($('input[name=SelectedRoleType]:checked').val() == "Referrer") {
        $('.MyTextBoxClass').show();
    }
    else {
        $('.MyTextBoxClass').hide();
    }
});

Scott L · Answer 4 · 2017-08-16T05:44:14.177

You could definitely clean this up a little. Some ideas:

Using the input names as selectors (performance hit, but negligible in this use case)
No need to remove the required attribute when hiding the text input
Use a ternary instead of a if/else to save a line (up to you if this is less readable)
Chain the show() and attr() calls together

So based on the above, we'd be left with something like this:

$('[name="SelectedRoleType"]').on('change', function(e) {
  e.target.value === "Referrer"
    ? $('[name="Email"]').show().attr('required', true)
    : $('[name="Email"]').hide()
});

Working jsfiddle: https://jsfiddle.net/ke4p37cy/

guest271314 · Answer 5 · 2017-08-16T05:59:06.287

Note, there are duplicate ids within HTML at Question at id="SelectedRoleType". id of element in document should be unique. Substitute setting "SelectedRoleType" at class attribute at HTML.

You can use .toggle() to set display of element to block or none using .index() of currently clicked <input type="radio"> element

$(function() {
  $(".js-radio").on("click", function() {
    $("#Email").toggle(!!$(this).index())
  })
})

#Email {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-10">
  <input class="js-radio SelectedRoleType" name="SelectedRoleType" type="radio" value="JobSeeker"> Job Seeker
  <input class="js-radio SelectedRoleType" name="SelectedRoleType" type="radio" value="Referrer"> Referrar
</div>
<div class="col-md-10">
  <input class="form-control" id="Email" name="Email" type="text" value="" required>
</div>

How to dynamically display a textbox and make it required based on radiobox selected in my ASP.NET MVC 5 application

5 Answers5