Wie man einen Elementzustand zwangsweise unverändert hält

Question

Ich habe ein Formular, das sich normal verhält, wobei die Eingaben durch einfache Validierung validiert werden. Wir haben ein Plugin installiert, das eine gründliche Validierung bietet.

Das Problem tritt auf, wenn das Plug-in die Übermittlungsschaltfläche deaktiviert, wenn die Validierung der Elemente, die es beobachtet, fehlschlägt.

Wie kann ich den Submit jederzeit aktiv halten, ohne Änderungen an den Plugin-Dateien vorzunehmen? Ich werde jedoch die Kontrolle über die Seite selbst haben, damit ich alles ändern kann.

Eine einfache JSFiddle habe ich die Situation zu veranschaulichen: 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); 
    } 
}); 

Answer 1

Sie können Ihre eigenen Event-Handler nach dem hinzufügen Plugin wird initialisiert, und diese werden effektiv außer Kraft setzen (nicht tatsächlich außer Kraft setzen) die Plugin Event-Handler ...

Wenn Sie diesen Add es läuft auf 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); 
}); 

Answer 2

Ich weiß nicht, welches Plugin Sie verwenden, aber aus meiner bisherigen Erfahrungen mit Formularvalidierung Plugins statt eingeben <button id="submit">Submit</button> Verwendung:

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