Validating a bootstrap 3 radio button in ASP.net form

I have been working on this asp.net form getting jquery validation/unobtrusive validation working but have exausted my google.com skills and have yet to find an answer.

I can't seem to get the jquery validation working on the radio buttons. Any help would be greatly apreciated

asp.net code:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        @Html.RadioButtonFor(x => x, true, new Dictionary<string, object> { { "id", "IsMonetary" }, { "data-val", "true" } })
        Add $ amount
    </label>
    <label class="btn btn-default">
        @Html.RadioButtonFor(x => x, false, new Dictionary<string, object> { { "id", "IsNotMonetary" } })
        Not this time jackson
    </label>
</div>

@Html.ValidationMessageFor(x => x)

Output html:

<form action class="form-horizontal" id="recipientForm" role="form" novalidate="novalidate">
    <div class="form-group">
        <div class="btn_group" data-toggle="buttons">
            <label class="btn btn-default">
                <input id="IsMonetary" name="IsMonetary" type="radio" data-val="true" data-val-required="*" value="true">Add $ award</label>
            <label class="btn btn-default">
                <input id="IsNotMonetary" name="IsMonetary" type="radio" value="false" data-val-required="*">Not this time</label>
        </div>
       <span class="field-validation-valid" data-valmsg-for="IsMonetary" data-valmsg-replace="true"></span>
    </div>
    <input id="derp" name="derp" data-val="true" data-val-required=”Required” />
    <span data-valmsg-for="derp" data-valmsg-replace="true"></span>
    <input type="submit" class="btn btn-primary pull-right loading" value="Submit" />
</form>

Here is the fiddle: JSFiddle* Note the external files, if you would like to view them please check: Here (github link)

Answers


Your code:

$('form').validate();

$('form').on('submit', function () {
    console.log($(this).validate());
    console.log("valid: " + $(this).valid());
    //return false;
});

You do not need a submit handler.

The jQuery Validate plugin...

a) captures the click of the submit button, b) captures the other mouse events that trigger validation, c) does the validation, d) prevents the submit if invalid, e) and then allows the submit if valid

... all automatically.

Basic usage: http://jsfiddle.net/xjXhN/


Also, .validate() is the initialization method of the plugin and only gets called once on page load. Doesn't the unobtrusive plugin along with ASP already handle this initialization automatically?


Need Your Help

Symfony2 common session strategy

symfony2 cookies dry

I have a symfony2 web project consisting of ten pages which are rendered via 5 controllers. User can land a site through any of the pages above (via shared link for example). And I need to show a w...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.