Is there a way to use jqxValidator to control state of buttons?

[KrzysioParticipant]

So I have a page with an entry for email and a button to send that email.

While it is nice to have a tooltip that tells me whether the entered email is valid or not, I would also like to have the ‘Send’ button enabled only if the email is valid and disabled otherwise.

This seems more friendly than validation on the form submission.

I cannot figure out how to do this within the jQWidgets framework.

Any ideas?

Krzysio

[adminKeymaster]

Hi Krzysio,

The form raises a ‘buttonClick’ event which you can use for validation purposes and make decisions whether to submit the form or not.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[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

[adminKeymaster]

Hi Krzysio,

This seems Ok to me as a validation method. I think it is safe to continue with it.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts