1

Model property which I intend to use inside two forms

public class TestModel
{
    [Display(Name = "Terms Accepted")]
    [Range(typeof(bool), "true", "true", ErrorMessage = "You need to accept terms  and conditions to proceed!")]
    public bool TermsAccepted { get; set; }
}

view Page

<form id="form1">
    <div class="row">
        <div class="col-md-3">
            @Html.CheckBoxFor(m => m.TermsAccepted) I accept terms and conditions
            @Html.ValidationMessageFor(m => m.TermsAccepted, new { @id = "chk1" })
        </div>
        <div class="col-md-3">
            <input type="submit" id="button1" onclick="return isFormValid('form1');" value="Submit Form 1"/>
        </div>
    </div>
</form>
<form id="form2">
    <div class="row">
        <div class="col-md-3">
            @Html.CheckBoxFor(m => m.TermsAccepted, new { @id = "chk2" }) I accept terms and conditions
            @Html.ValidationMessageFor(m => m.TermsAccepted)
        </div>
        <div class="col-md-3">
            <input type="submit" id="button2" onclick="return isFormValid('form2');" value="Submit Form 2"/>
        </div>
    </div>
</form>

When this UI is rendered on the page, checkbox inside the 1st form do contains attributes for RangeDataAnnotation while checkbox inside 2nd form doesn't have any attributes for data annotation. So this results into 2nd form doesn't throw any validation on submission.

Html of checkboxes which get rendered on UI Inside form 1:

<input name="TermsAccepted" class="input-validation-error" id="chk1" aria-describedby="TermsAccepted-error" type="checkbox" value="true" data-val="true" data-val-range-min="True" data-val-range-max="True" data-val-range="You need to accept terms and conditions to proceed!">

Inside form 2:

<input name="TermsAccepted" id="chk2" type="checkbox" value="true">

Any suggestions to make this work in both forms?

Muhammed Shevil KP
  • 1,404
  • 1
  • 16
  • 21
Roshni
  • 265
  • 2
  • 10
  • 1
    You cant. Its by design. Use a view model with 2 `bool` properties. But what is the point of this anyway - you can only submit one form so why generate that extra html. What are you trying to achieve? –  Feb 09 '17 at 06:30
  • 1
    The behavior is explained in [this answer](http://stackoverflow.com/questions/29047930/html-checkboxfor-generates-client-side-validation-attributes-while-html-check/29048385#29048385) –  Feb 09 '17 at 06:31
  • And as a side note, your `[Range]` attribute will not give you any client side validation. Refer dazbradbury's answer [here](http://stackoverflow.com/questions/4730183/mvc-model-require-true) for an attribute you can use and will give both client and server side validation –  Feb 09 '17 at 06:37
  • @StephenMuecke, I have added a client side jquery validator for this to override behaviour for checkbox. But agreed with you that it would not get validated on server side. – Roshni Feb 09 '17 at 13:04
  • Hour script is not tapping into the `$.validator` and despite what you may think it will not behave the same as other validation. You still have not explained why you have 2 forms (it makes no sense) –  Feb 09 '17 at 22:26
  • @StephenMuecke We are showing multiple tabs on a single page and have different operations on them and each tab's data should be submitted separately. Anyways, now we are following a different approach. – Roshni Apr 06 '17 at 13:15

0 Answers0