How can I add a method for custom validation?

Question

I am working on an ASP MVC3 project, using validate and unobtrusive jquery. I have several area on a page that I need to create custom validation for, and ensure it doesn't break anything else. Currently I have several sections, each have a radio button pair, some text boxes, a button and a table. User fills in the text boxes, hits the button, and I have a function that puts the data from the textboxes into a new row on the table. I also have a counter that is advanced once with each button press.

The validation needs to be along the lines of "If the radio button returned true, the counter needs to be > 1.

I wrote this function that seems like it would work, but I believe I need to re-write it so it is tied into the existing validation, hence the need to add a method or rule:

$(document).ready(function () {
    $("#nextBtn").click(function () {
         var rows = $("#ROTable tr").length;
          if ($("#RO_Yes").is("checked") && (rows < 3))
          {
             $(this).closest("div.historyCollection").css("backgroundcolor: #ff0000;");
          }
    });
});

I have looked around and I found a section on the JQUery site discussing Rules (dependant value) which seems like it may fit. But because I am pretty new to this stuff, I wanted to poll the experts before I look too hard in one direction. Thank you for reading.

EDIT: I have been playing around and I came up with this:

SECOND EDIT: As noted by TallMaris, the ROCounter selctor was wrong, so it is now corrected but still fails with the same error:

$(document).ready(function () {
    $("#ROCounter").rules("add", {
        required: ($("#RO-Yes").is(":checked")) && ($('#ROCounter') < 1),
        messages: {
            required: "Please enter further information"
        }
    });
});

but it broke all the validation and caused an error in the jquery.validate.min.js file: " TypeError: Cannot read property 'form' of undefined".

ROCounter is a hidden field. If the error message is attached to this hidden field, does that mean the message will also be hidden, so not show? Here is some HTML:

<div class="formQuestion">
        <div class="editor-field2">
            @Html.RadioButtonFor(m => m.HistoryModel.EverHadRestrainingOrder, true, new { @class = "commentBox", id="RO_Yes" })
                <label for="HistoryModel_ChildAbuseCurrent">Yes</label>
            @Html.RadioButtonFor(m => m.HistoryModel.EverHadRestrainingOrder, false, new { @class = "commentBox", id = "RO_No", @checked = "checked" })
                <label for="HistoryModel_ChildAbuseCurrent">No</label>
        </div>
        <div class="editor-label2">
            @Html.LabelFor(m => m.HistoryModel.EverHadRestrainingOrder)
        </div>

@*  Start Fieldset collection for Restraining Order   *@
   <div class="hidden">
     <fieldset class="historyCollection"> 
       <legend>Please provide the following information</legend>  
        <div class="formGroupHist">
            <div class="editor-label-Hist">
                @Html.Label("Date of Order")
            </div>
            <div class="editor-field-Hist">
                @Html.TextBox("OrderDate-RO", null, new { @class = "dp" })
            </div>
        </div>

        <div class="formGroupHist" style="width: 125px">
            <div class="editor-label-Hist">
                @Html.Label("State")
            </div>
            <div class="editor-field-Hist">
            @Html.DropDownList("State-RO", new SelectList(Model.State, "Value", "Text"), "Select", new { style = "width: 65px;" })
            </div>
        </div>

        <div class="formGroupHist">
            <div class="editor-label-Hist">
                @Html.Label("Name of Protected Party")
            </div>
            <div class="editor-field-Hist">
                @Html.TextBox("ProtectedParties")
            </div>
        </div>            

        <div class="formGroupHist">
            <div class="editor-label-Hist">
                @Html.Label("Explanation of Circumstances")
            </div>
            <div class="editor-field-Hist">
                @Html.TextArea("Comments-RO")
            </div>
        </div>
        <div class="button">
            <button type="button" id="ROButton" class="SKButton">Add Information</button>
        </div>

        <div>
            @Html.HiddenFor(m => m.ROCounter)
        </div>
        <table id="ROTable" class="data-table-page2">
            <tr>
                <th>Date of Order</th>
                <th>State</th>
                <th>Name(s) of Protected Parties</th>
                <th>Explanation of Circumstances</th>
            </tr>
            <tr class="ROTempRow">
                <td colspan=4>No Information Entered.</td>

            </tr>
        </table>
    </fieldset>
</div>

My main question though, is how to correctly tie the new validation rule into the existing validation. I have read that unobtrusive first parses the document looking for existing validation, and if any is found, it will go no further. The majority of the form is tied into the 'stock' validation so I can not have it broken. Once I get that part figured out, I can probably figure out the actual rule coding for it.

Thank you.

maybe just because the selector is wrong... try $('#ROCounter'). What type is this ROCounter anyway? can you show a bit of the HTML around? — Tallmaris
– Tallmaris, Commented Oct 19, 2012 at 14:12
Throwing a wild guess here, what are the annotations on the ROCounter property on the model? Keep in mind that even if you put nothing, by simply being (for example) an int, will generate at least a "required" rule in unobtrusive validation, which you are then re-adding in javascript... — Tallmaris
– Tallmaris, Commented Oct 19, 2012 at 15:25
@TallMaris - Ahh, very good point. Although the property is not decorated in the model, I checked the rendered HTML and, as you said, there is validation on it. I had already set the value to 0 which is why it has never came up as a validation error. So if there is already data-val attributes attached, I just can use/add more as needed to achieve my validation. So now I just need to know if I should be adding an unobtrusive method, or a validate plug-in rule. Your thoughts? — BattlFrog
– BattlFrog, Commented Oct 19, 2012 at 15:38
Well it really depends on the logic needed. The "required" rule means that the value cannot be null, if you need a more complex rule, you can create it ($.validator.addMethod...) and add it to your field. If the "required" rule is what you need but you want it to make it "custom" (indeed, to be calculated only in certain situations and meaning you can accept null values), change the C# property from int to int? and MVC will not create the required rule for you. — Tallmaris
– Tallmaris, Commented Oct 19, 2012 at 15:48

Tallmaris · Accepted Answer · 2012-10-19 23:18:20Z

2

As noted in the comments, the "required" rule is already in place due to the stock validation from MVC. Moreover, apparently MVC3 has no stock validator in place for min value, but only for Range... I suggest you add your own method to the validator object and add this rule to the object, like this (from the API doc)

$.validator.addMethod("min_counter", function (value, el) {
    return value > 1;
});

Then add the rule. Note the name of the method above is repeated as the key of the rule and message objects, this is how the validate() method knows what method to run to perform the actual validation.

$("#ROCounter").rules("add", {
    //this tells validator to evaluate only when the radio is checked. 
    //For example, if you put "true" here, the rule "min_counter" will be evaluated always.
    min_counter: $("#RO-Yes").is(":checked"), 
    messages: {
        min_counter: "Please enter further information"
    }
});

Let me know if that works for you.

answered Oct 19, 2012 at 23:18

Tallmaris

7,5903 gold badges31 silver badges59 bronze badges

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

5 Comments

BattlFrog Over a year ago

Hello again TallMaris. So the way I am reading this is, add the 'min_counter' method to the validator plugin, then it is used by adding the rule to the ROCounter div, which says, "If the RO-Yes button is checked, then the value of the ROCouner needs to be greater than 1" correct? either way, I got an error saying: "Cannot read property 'settings' of undefined".

BattlFrog Over a year ago

The error is referring to the 'settings' var in the jquery.validate.js file, specifically this spot: " rules: function(command, argument) { var element = this[0]; if (command) { var settings = $.data(element.form, 'validator').settings; var staticRules = settings.rules; "

BattlFrog Over a year ago

I wonder if I have too many scripts running, I have unobtrusivem validatem MicrosoftMVCValidation and a custom FoolProof validation which I am suing for certain areas.

BattlFrog Over a year ago

I cut down on the scripts, but still getting the error message. I am researching but have not yet found an answer.

Tallmaris Over a year ago

The rules.add() part will only work after $("form").validate() has been called as the docs say. Unobtrusive validation is actually calling it, but maybe this is happening too late... Can you try to comment out your rules.add() and eventually fire it from the console when everything is loaded fully? You can also check that $("form").data('validator') is defined before doing that...

Collectives™ on Stack Overflow

How can I add a method for custom validation?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related