Jquery unobstrusive validation while binding radio button

Question

I have a form which asks user to select Yes or No based on some questions.Intitally none of the option will be selected.If user clicks save button without selecting the option validation should be shown

 <div>
    <label for="IsSourceCodeCollected" class=" control-label">
          Question 1
    </label>
</div>
 <div>
     <label style="width:100px">
           @Html.RadioButtonFor(m => m.StudentProjectApprovalTrainer.IsSourceCodeCollected, true, new { @class = "minimal sourceCodeCollected" })
            YES
    </label>
   <label style="width:100px">
           @Html.RadioButtonFor(m => m.StudentProjectApprovalTrainer.IsSourceCodeCollected, false, new { @class = "minimal sourceCodeCollected" })
           NO
   </label>
</div>
 @Html.ValidationMessageFor(m => m.StudentProjectApprovalTrainer.IsSourceCodeCollected)

 <button type="submit" id="btnSubmit" class="btn btn-info pull-left ">
   <i class="fa  fa-save"></i>
        Save
 </button>

Model

[Required(ErrorMessage = "Please select this")]        
public bool IsSourceCodeCollected { get; set; }

Javascript

 $(document).on("click", "#btnSubmit", function () {
    var form = $("#frmAdd");       
    if (form.valid()) {
        alert("hai");
    };     
    return false;
});

When I clicks the save button without selecting Yes or No alert is shown which means form is valid.

How can i solve this scenario ??

Not sure what our claiming here. Your binding to property IsSourceCodeCollected of StudentProjectApprovalTrainer and IsSourceCodeCollected is a bool which means that one of the radio buttons will be always be selected when the view is rendered because its initial value is either true or false (and cannot be anything else) — user3559349
– user3559349, Commented Feb 16, 2016 at 6:37
If on the other hand, you do want to initially display no selected buttons, then you can make your property nullable (bool? IsSourceCodeCollected) which means if the user does not select one, the validation message will be displayed when the submit button is clicked. — user3559349
– user3559349, Commented Feb 16, 2016 at 6:54
Thanks mate changing from bool to bool? solved the issue.Can you post the answer so that it would help other newbies like me :). — ksg
– ksg, Commented Feb 16, 2016 at 7:14

user3559349 · Accepted Answer · 2016-02-16 07:21:27Z

1

Your property is typeof bool which must always have a value (adding the [Required] attribute is not necessary unless you wanted a specific error message). Because its value is either true or false, one of your radio buttons will always be selected when the view is first rendered (and its not possible to 'un-select' both) so the model is always valid.

If you want the option to display both buttons as un-selected and have the validation error display if left un-selected, then you need to change the property to be nullable.

[Required(ErrorMessage = "Please select this")]        
public bool? IsSourceCodeCollected { get; set; }

answered Feb 16, 2016 at 7:21

user3559349

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery unobstrusive validation while binding radio button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related