Password checking in dojo

I want to check that two passwords are the same using Dojo.

Here is the HTML I have:

<form id="form" action="." dojoType="dijit.form.Form" />

<p>Password: <input type="password" name="password1" id="password1" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Please type a password" /></p>

<p>Confirm: <input type="password" name="password2" id="password2" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="This password doesn't match your first password" /></p>

<div dojoType="dijit.form.Button" onClick="onSave">Save</div>

</form>

Here is the JavaScript I have so far:

var onSave = function() { if(dijit.byId('form').validate()) { alert('Good form'); } else { alert('Bad form'); } }

Thanks for your help. I could do this in pure JavaScript, but I'm trying to find the Dojo way of doing it.

Answers


This will get you a lot closer

  • setting intermediateChanges=false keeps the validator running at every keystroke.
  • the validation dijit's constraint object is passed to its validator. Use this to pass in the other password entry
  • dijit.form.Form automatically calls isValid() on all its child dijits when it's submitted, and cancels submittion if they don't all validate. I though the invalid ones would get their error message, but they don't. That's left as an exercise for the reader ;-)

the validation function:

function confirmPassword(value, constraints)
{
    var isValid = false;
    if(constraints && constraints.other)  {
        var otherInput =  dijit.byId(constraints.other);
        if(otherInput) {
            var otherValue = otherInput.value;
            console.log("%s == %s ?", value, otherValue);
            isValid = (value == otherValue);
        }
    }
    return isValid;
}
function onsubmit()
{
    var p1 = dijit.byId('password1').value;
    var p2 = dijit.byId('password2').value;
    return p1 == p2;
}

and the input objects:

<p>Password: <input type="password"
    name="password1"
    id="password1"
    dojoType="dijit.form.ValidationTextBox"
    required="true"
    intermediateChanges=false
    invalidMessage="Please type a password" /></p>

<p>Confirm: <input type="password"
    name="password2"
    id="password2"
    dojoType="dijit.form.ValidationTextBox"
    required="true"
    constraints="{'other': 'password1'}"
    validator=confirmPassword
    intermediateChanges=false
    invalidMessage="This password doesn't match your first password" /></p>

Even easier, use the pre-written Dojox widget, dojox.form.PasswordValidator.

http://docs.dojocampus.org/dojox/form/PasswordValidator

It does everything you want straight out of the box!


I've solved it!

This page on the Dojo forum was helpful.

I changed the HTML for the confirm password to:

<p>Confirm: <input type="password" name="password2" id="password2" dojoType="dijit.form.ValidationTextBox" required="true" validator="return theSame(this, dijit.byId('password1'));" invalidMessage="This password doesn't match your first password" /></p>

The only difference is the added validator parameter.

And I created the following JavaScript function:

function(dojoTxt1, dojoTxt2) { return dojoTxt1.getValue() == dojoTxt2.getValue(); }

I think you can also use the validator parameter to create regular expressions to test against, but the documentation isn't very clear.


Need Your Help

Reading row count from Cursor

android sql database cursor

How do I get the row count of a Cursor without using moveToFirst()?

How to add onclientclick to a control that is dynamically created in the codebehind?

c# asp.net onclick

I have a checkbox that is dynamically created in the code-behind. I also need add a textbox, that is visible if the checkbox is checked. I know I can use