This is a migrated thread and some comments may be shown as answers.

Custom Validation Does Not Work

5 Answers 409 Views

Validation

This is a migrated thread and some comments may be shown as answers.

Mark asked on 09 Mar 2012, 12:15 AM

[Edited] Ok, rephrasing this question after looking at it again. I'm trying to use both the HTML5 validation, and then also add one extra check that password and password-confirm contain the same value. It is working now, however, the message for that extra validation is not overriding the validationMessage value. Is there a straightforward way to do this?

And again, your documentation is a nice start, but it really needs more complete examples, and thorough coverage of options and capabilities. Thanks.

<html>

<head>

<link href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>

</head>

<body>

<form id="foo-form" name="foo-form" action="/foo" method="get">

<select id="test-combo" multiple="multiple">

<option value="1">Option 1</option>

<option value="2">SmOption 2</option>

<option value="3">BlOption 3</option>

<option value="4">GOption 4</option>

</select>

<br />

<label for="org" class="required">Organization</label>

<input id="org" name="org" required="required"

type="text" validationMessage="Organization required" />

<span class="k-invalid-msg" data-for="org"></span><br />

<label for="zip" class="required">Zip Code</label>

<input id="zip" name="zip" pattern="\d{5}([\-]\d{4})?" required="required"

type="text" validationMessage="Valid zip code required" />

<span class="k-invalid-msg" data-for="zip"></span><br />

<label for="fullname" class="required">Name</label>

<input id="fullname" name="fullname" required="required"

type="text" validationMessage="Please enter full name" />

<span class="k-invalid-msg" data-for="fullname"></span><br />

<label for="email" class="required">Email</label>

<input id="email" name="email" required="required"

type="email" validationMessage="Valid email required" />

<span class="k-invalid-msg" data-for="email"></span><br />

<label for="password" class="required">Password</label>

<input id="password" name="password" required="required"

type="password" validationMessage="Please enter password" />

<span class="k-invalid-msg" data-for="password"></span><br />

<label for="password-confirm" class="required">Confirm Password</label>

<input id="password-confirm" name="password-confirm" required="required"

type="password" validationMessage="Please confirm password" />

<span class="k-invalid-msg" data-for="password-confirm"></span><br />

<input id="register-submit" name="register-submit" type="submit" value="Sign Up" />

</form>

<script type="text/javascript">

$(document).ready(function(){

$("#test-combo").kendoComboBox({

filter: "contains",

suggest: true,

});

$("#foo-form").kendoValidator({

rules: {

verifyPasswords: function(input){

var ret = true;

                             if (input.is("[name=password-confirm]")) {

                                 ret = input.val() === $("#password").val();

                             }

                             return ret;

}

},

messages: {

verifyPasswords: "What's going on?"

}

});

</script>

</body>

5 Answers, 1 is accepted

answered on 10 May 2012, 10:37 PM

I was able to fulfill those same requirements with three custom validations (you may not want the password length validation, so could probably just use the other two).

I apologize, the only code I have for this right now is in ClojureScript, and I don't have time to convert it, but it should still be fairly clear what is going on (see form-validator-config at the end):

(defn password-entered? [input]
(cond
(not (.is input "#register-pass")) true
(not (string/blank? (.val input))) true
:else false))

(defn password-length? [input]
(cond
(not (.is input "#register-pass")) true
(>= (count (.val input)) 8) true
:else false))

(defn password-confirm-matches? [input]
(cond
(not (.is input "#password-confirm")) true
(= (.val input) (.val ($ "#register-pass"))) true
:else false))

(def form-validator-config
(conv/clj->js
{:rules {:password-entered password-entered?
:password-length password-length?
:password-confirm-matches password-confirm-matches?}
:messages {:password-entered "Password required"
:password-length "Must be at least 8 characters"
:password-confirm-matches "Passwords do not match"}}))