How to keep an element state unchanged forcefully

Question

I have a form which behaves normally, with the inputs validated by simple validation. We installed a plugin, which provides some in-depth validation.

The issue arises when the plugin disables the submit button if it's validation fails on the elements it's watching.

How can I keep the submit on active state at all time without making any modification to the plugin files. However, I will have control on the page itself, so I can alter anything.

A simple JSFiddle I created to illustrate the situation: JSFiddle

HTML

<form action="#" id="form">
  Name: <input type="text" id="name" class="form-field">
  <span class='error-message'>Name is required</span><br>
  Age: <input type="text" id="age" class="form-field">
  <span class='error-message'>Age is required</span><br>
  Password: <input type="password" id="pass" class="adv-form-field">
  <span class='error-message'>Advanced messages</span>

  <button id="submit">Submit</button>

</form>

CSS

.error-message{
  display: none;
}

JavaScript (jQuery)

// Simple validation to check if the fields have values
$(".form-field").on("blur", function(){
        if(this.value == ""){
        $(this).next(".error-message").css("display", "block");
    } else {
         $(this).next(".error-message").css("display", "none");
    }
});


// Suppose this is the advanced function | we will have no control over this
$("#submit").prop("disabled", true);
$(".adv-form-field").on("blur", function(){
        if(this.value == ""){
        $(this).next(".error-message").css("display", "block");
      $("#submit").prop("disabled", true);
    } else {
         $(this).next(".error-message").css("display", "none");
       $("#submit").prop("disabled", false);
    }
});

Simply add another event handler after the plugin... `$(".adv-form-field").on("blur", function() { $("#submit").prop("disabled", false); });` — Reinstate Monica Cellio, Jun 29 '16 at 15:23
@user2181397 It's for a vBulletin forum, wasn't possible to include it. But it was doing pretty much some checks, then it's enabling/disabling the button. — Suthan Bala, Jun 29 '16 at 15:28
@Archer The plugin sets it to disabled state on the page load as well, now that you mentioned this, I should be able to add an event handler for the load as well. I'll update you on the progress. Thanks — Suthan Bala, Jun 29 '16 at 15:28
That should solve your problem, yes. As long as you assign your 2 new event handlers after the plugin is initialised then they should effectively override the behaviour you don't wish to see. — Reinstate Monica Cellio, Jun 29 '16 at 16:06
@Archer Thanks that worked. Please submit an answer and I will accept it. Thank you — Suthan Bala, Jun 29 '16 at 18:52

Reinstate Monica Cellio · Accepted Answer · 2016-07-01T09:10:23.397

You can add your own event handlers after the plugin has initialised, and these will effectively override (not actually override) the plugin event handlers...

If you add this it will run on document.ready...

$(function() {

    // set submit button enabled after input field blur
    $(".adv-form-field").on("blur", function() {
        $("#submit").prop("disabled", false);
    });

    // set initial state of submit button
    $("#submit").prop("disabled", false);
});

score -1 · Answer 2 · answered Jun 29 '16 at 15:26

-1

I don't know which plugin you are using, but from my previous experience with form validation plugins instead of typing <button id="submit">Submit</button> use:

<input type="submit" id="submit">

answered Jun 29 '16 at 15:26

Steve-o The Cheerio

1

It was an example I wrote to give an idea of what's happening. The plugin was setting the `input:submit`'s disabled state to true. – Suthan Bala Jun 29 '16 at 15:30

How to keep an element state unchanged forcefully

2 Answers2