Eingabezeichen in HTML-Form müssen übereinstimmen - jQuery?

Question

Wie gebe ich ein HTML-Textfeld ein und wenn die ersten 3 Zeichen nicht mit einer gesetzten Variable übereinstimmen - dann einen Fehler anzeigen? Ich muss den Fehler zu verlieren und Text neben dem Eingang nach dem 3. Zeichen anzeigen

Ich denke, jQuery, AJAX, PHP - nicht sicher. Ich möchte nur keine Alarmbox benutzen.

Und das muss sein, bevor ein Benutzer die Absenden-Button betritt ...

<form> 
    <input type="text" id="test"/><br> 
    <input type="button" id="txt" value="Submit" /> 
</form> 

$(document).ready(function(){ 
    $("#txt").click(function(){ 
     var text = $("#test").val(); 
     var comparingText = "yes"; 

     if (text != comparingText){ 
      alert($("#test").val()); 
     } 
    }); 
}); 

Answer 1

Es wird diese Warnung nach dem Schreiben zeigen, ja. können Sie es verwenden, wie Sie möchten.

$("#test").keyup(function() { 
    var test = $("#test").val(); 
    if(test == 'yes'){ 
     alert("your Error msg"); 
    } 
}); 

Answer 2

können Sie verwenden, um ein <span> Element, neben dem <input> Element eine Fehlermeldung angezeigt und, wie Sie gesagt haben, vermeiden Sie die Alert-Box verwenden.

JS

HTML

<form> 
    <input type="text" id="test" oninput="submitData(this.value)"/> 
    <span id="textError"></span><br/> 
    <input type="button" id="txt" value="Submit" /> 
</form> 

JS

function submitData(input) {   
    if (input != "yes") { 
     document.getElementById("textError").innerHTML = "Your Error MSG"; 
    } else { 
     document.getElementById("textError").innerHTML = "";  
    } 
} 

JS + jQuery

In diesem Fall ich Mamunur Rashid Einnahme bin Antwort, um den Code zu ergänzen.

HTML

<form> 
    <input type="text" id="test"/> <span id="textError"></span><br/> 
    <input type="button" id="txt" value="Submit" /> 
</form> 

jQuery

$(document).ready(function(){ 
    $("#test").keyup(function(){ 
     var test = $("#test").val(); 
     if (test != "yes") { 
      $("#textError").html("Your Error MSG"); 
     } else { 
      $("#textError").html(""); 
     } 
    }); 
});