Validate dynamic controls with jquery validation in MVC4

Question

I,m using Jquery validation plugin to create some dynamic input controls in MVC4 application.I have followed following links in generating the clientside validation script.

http://jqueryvalidation.org/

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

jQuery validate: How to add a rule for regular expression validation?

The razor view have the controls rendered from the model and also control rendered dynamically from the database defined by the user.

following is the rendered HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery-ui-1.8.20.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="/Content/DynamicForms/jquery.validate.js"></script>
    <script src="/Content/DynamicForms/additional-methods.js"></script>
    <script src="/Content/Breadcrumb/jquery.easing.1.3.js"></script>
    <script src="/Content/Breadcrumb/jquery.jBreadCrumb.1.1.js"></script>
</head>
<body>
    <div id="body">
        <section class="content-wrapper main-content clear-fix">


<form action="/Cabinet/Create" id="frmOperator" method="post">    <fieldset>
        <legend>File</legend>

        <div class="editor-field">
        <label for="IndexCard_Uid">Uid</label>
        </div>
        <div class="editor-label">
        <input data-val="true" data-val-number="The field Uid must be a number." data-val-required="The Uid field is required." id="IndexCard_Uid" name="IndexCard.Uid" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="IndexCard.Uid" data-valmsg-replace="true"></span>
        </div>
        <br/>

        <div class="input_area">
  <div id="new_form_handle_row">
    <label class="text_label clear_left" for="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379">Name</label>
    <input data-rule-required="true" id="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379" name="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379" type="text" value="" />
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
  <script>      $("#frmOperator").validate();</script>
</div>
        <p>
            <input type="submit" value="Create" />
        </p>
        <br/>
    </fieldset>
</form>
<a data-ajax="true" data-ajax-mode="replace" data-ajax-success="javascript:PopUp()" data-ajax-update="#dialog-cabinet" href="/Cabinet/CreateCabinet?rand=0.0905532776799767">Create</a>
<div id="dialog-cabinet" title="Create New Cabinet"></div>

<script language="javascript" type="text/javascript">
    function PopUp() {
        alert("#dialog-cabinet");
        $("#dialog-cabinet").dialog({
            height: 500,
            width: 500,
            modal: true
        });
    }
</script>
            </section>
    </div>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>

This html validates Model controls as well as dynamic controls. But the problem is I have to call the following lines twice at the start and end of the page.This prevent me opening popup dialog using the method $("#dialog-cabinet").dialog().

<script src="/Scripts/jquery-1.7.1.js"></script>
        <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

does anybody knows a better way to use jquery validation plugin with MVC.

Thanks in advance.

 <input data-val="true" data-val-number="The field Uid must be a
        number." data-val-required="The Uid field is required."
        id="IndexCard_Uid" name="IndexCard.Uid" type="text" value="" />
 <span class="field-validation-valid" data-valmsg-for="IndexCard.Uid" data-valmsg-replace="true"></span>


    <input data-rule-required="true"
        id="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379"
            name="MvcDynamicField_D7060964a-5c5b-44b4-b9c5-2115961e8379"
            type="text" value="" />

 <script>    $("#frmOperator").validate({ rules: {} });</script>

The 1st is the input generated by the mvc. The 2nd one is the input generated from the database values. The third one is the script to validate the dynamic control using jquery validation. If I remove scripts at end or start both validations won't work. but if I load the script twice I could not load a popup using following method

function PopUp() {
            alert("#dialog-cabinet");
            $("#dialog-cabinet").dialog({
                height: 500,
                width: 500,
                modal: true
            });
        }

If any one could help I'd be grateful.

developer10214 · Answer 1 · 2013-08-07T18:35:13.087

I don't think you have to call the script lines twice. In the default Layout.cshtml there is a script section at the end, where the jquery script are included. That produces the script lines at end of your rendered HTML (execpt the modernizer script). Which is correct because the script files should be loaded at the end (see http://developer.yahoo.com/performance/rules.html#js_bottom for more info).

For some reason the jquery scripts where loaded in the head part of your layout.cshtml too, which is wrong at all, but the scripts should be loaded only once.

If you have created a new partial view for your form via the VS dialog, there is a checkbox named "Reference script libraries". If the checkbox is checked a new partial view will be created and at the end of the partial view you will find the following lines:

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

This references to the @RenderSection("scripts", false) line in your Layout.cshtml and places the jQuery validation scripts at the of the rendered HTML.

Long story short:

you should remove the scripts at end OR the start

Validate dynamic controls with jquery validation in MVC4

1 Answers1