[KrzysioParticipant]

Hi Peter,

Yes, I understand that the form can be validated after clicking on the button.

What I wanted to accomplish is that the button should be active only *after* the email passes the validator.

In other words, whenever the tooltip displays the “Invalid e-mail” text, the button is inactive and cannot be clicked.

After some thinking, it occurred to me that the documentation of the validateInput API might be incorrect: why would it return no value? This did not make sense, so I experimented and turns out that it does return a value, and the following works:

$(document).ready(function () {
  $("#email").jqxInput({  width: '250px', height: '30px', placeHolder: "Enter email" });
  $("#passwd").jqxPasswordInput({  width: '250px', height: '30px', showStrength: false, placeHolder: "Enter password" });
  $('#form').jqxValidator({rules: [{ input: '#email', message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}] })
  $("#login").click(function () { $('#form').jqxValidator('validate'); });
});

function checkInput() {
  var eI = ($("#email").val() === "") || ! $('#form').jqxValidator('validateInput', '#email'); // is true if email empty or invalid
  var pI = ($("#passwd").val() === ""); // is true if password empty
  $("#login").jqxButton({ disabled: (pI || eI) });
}

And here’s the button:

<input style="width: 250px;" size="38" type="text" id="email" name="email" oninput="checkInput()" />

The code makes the button inactive unless the email entry is non-empty and valid, and the password entry is non-empty.

So the only remaining question is: could this have been done in a simpler manner?

Krzysio

[Author]

Posts