Ich versuche jsp Login-Formular zu validieren, ich brauche Feld (Label) Validierung statt Warnmeldung

Question

Hier ist mein javascript:

function checkEmail() { 

    var email = document.getElementById('mLoginName'); 


    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/; 


    if (!filter.test(email.value)) { 
     alert("Please enter valid email id or 10 digit mobile number"); 
     email.focus(); 
     return false; 
    } 
} 

HTML-Code:

<form:form method="post" onsubmit="return checkEmail();" action="SignIn" modelAttribute="memberBean" > 
    <form:input type='hidden' name='mode' id='mode' path='mode' /> 
    <form:input type='text' class="input" name='mLoginName' id='mLoginName' path='mLoginName' onblur="checkInp()" placeholder='Email/Mobile' /> 

<input type='submit' class="submit" value='SignIn/SignUp' > 
</form:form> 

Answer 1

Sie können eine gerade hinzufügen <span id="mLoginValidate"></span> (oder ein <p></p> je nachdem, wie Sie es haben wollen schauen) Ihre Eingabe nach, und dann in Ihrem Code, fügen

document.getElementById('mLoginValidate').innerHTML = "Please enter valid email id or 10 digit mobile number"; 

Sie können die CSS-Datei auch in display: none ändern, wenn der Benutzer mit der erneuten Eingabe beginnt, und dann nach einer fehlgeschlagenen Überprüfung die Option display: block zurück ändern.

Hier ist eine kleine Geige: https://jsfiddle.net/virginieLGB/h600vecx/

Hier ist, was ich getan habe:
HTML :

<input type='text' ... onkeydown="hideError()" /> 
<span id="mLoginValidate">Please enter valid email id or 10 digit mobile number</span> 

CSS:

span { 
    color: red; 
    display: none; 
} 

javascript:

function hideError() { 
    document.getElementById("mLoginValidate").style.display = "none"; 
} 

Und in Ihrem check() Funktion:

document.getElementById("mLoginValidate").style.display = "block";