jQuery UI Widgets Forums Form Is there a way to use jqxValidator to control state of buttons?

This topic contains 3 replies, has 2 voices, and was last updated by  admin 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Krzysio
    Participant

    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


    admin
    Keymaster

    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/


    Krzysio
    Participant

    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


    admin
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.