How to make this validation using pure JavaScript?

JavaScript
1

Hi there

This is my jsfiddle

What I want is when user clicks and submit and full fill one Input text values then that message In Front of that element should remove but this is not working.As I Click on Subit Button again but that message is Still there

How to solve this approach using Pure JavaScript?

Thanks

2

I give up working with your fiddle. It’s not cooperating. I’ll just post code, here.

<form method="post" onsubmit="return myFunction();" id="myForm" name="myForm">
FirstName<input type="text" id="userFirstName"/><br /><br /><p id="id1"></p>
LastName<input type="text" id="userLastName"/><br /><br /><p id="id2"></p>
UserId<input type="text" id="userId"/><br /><br /><p id="id3"></p>
Password<input type="text" id="userPassword"/><br /><br /><p id="id4"></p>
<input type="submit" value="Submit" />
</form>

function myFunction(){    document.myForm.preventDefault();
    var validateLetters = /^[a-z]{2,}$/i;
    var userFirstName = document.myForm.userFirstName.value;
    var userLastName = document.myForm.userLastName.value;
    var userId = document.myForm.userId.value;
    var userPassword = document.myForm.userPassword.value;
    var validForm = true;
    try{
    if(!userFirstName.match(validateLetters)){
        document.getElementById("id1").innerHTML="First Name Please Enter Letters Only"; validForm = false;
        }

    if(!userLastName.match(validateLetters)){
        document.getElementById("id2").innerHTML="Last Name Please Enter Letters Only"; validForm = false;
        }

    if(!userId.match(validateLetters)){
        document.getElementById("id3").innerHTML="User ID Please Enter Letters Only"; validForm = false;
        }


    if(!userPassword.match(validateLetters)){
        document.getElementById("id4").innerHTML="Password Please Enter Letters Only"; validForm = false;
        }
    }catch(e){alert(e);}

    }

Give this a shot (NOT in jsfiddle… locally) and see if that works.

HTH,

:slight_smile:

3

something like this tried

    <html>
    <head>
    <script type="text/javascript">
     function myFunction(){    document.myForm.preventDefault();var validateLetters = /^[a-z]{2,}$/i;var userFirstName = document.myForm.userFirstName.value;var userLastName = document.myForm.userLastName.value;var userId = document.myForm.userId.value;
    var userPassword = document.myForm.userPassword.value;
    var validForm = true;
    try{
    if(!userFirstName.match(validateLetters)){
        document.getElementById("id1").innerHTML="First Name Please Enter Letters Only"; validForm = false;
        }

    if(!userLastName.match(validateLetters)){
        document.getElementById("id2").innerHTML="Last Name Please Enter Letters Only"; validForm = false;
        }

    if(!userId.match(validateLetters)){
        document.getElementById("id3").innerHTML="User ID Please Enter Letters Only"; validForm = false;
        }


    if(!userPassword.match(validateLetters)){
        document.getElementById("id4").innerHTML="Password Please Enter Letters Only"; validForm = false;
        }
    }catch(e){alert(e);}

    }
</script>
</head>
<body>
<form method="post" onsubmit="return myFunction();" id="myForm" name="myForm">
FirstName<input type="text" id="userFirstName"/><br /><br /><p id="id1"></p>
LastName<input type="text" id="userLastName"/><br /><br /><p id="id2"></p>
UserId<input type="text" id="userId"/><br /><br /><p id="id3"></p>
Password<input type="text" id="userPassword"/><br /><br /><p id="id4"></p>
<input type="submit" value="Submit" />
</form>
</body>

but its not working

4

Try this:

   <html>
    <head>
    <script type="text/javascript">
     function myFunction(){

    var validateLetters = /^[a-z]{2,}$/i;
    var userFirstName = document.myForm.userFirstName.value;
    var userLastName = document.myForm.userLastName.value;
    var userId = document.myForm.userId.value;
    var userPassword = document.myForm.userPassword.value;
    var validForm = true;
document.getElementById("id1").innerHTML="";
document.getElementById("id2").innerHTML="";
document.getElementById("id3").innerHTML="";
document.getElementById("id4").innerHTML="";

    try{
    if(!userFirstName.match(validateLetters)){
        document.getElementById("id1").innerHTML="First Name Please Enter Letters Only"; validForm = false;
        }

    if(!userLastName.match(validateLetters)){
    document.getElementById("id2").innerHTML="Last Name Please Enter Letters Only"; validForm = false;
    }

if(!userId.match(validateLetters)){
    document.getElementById("id3").innerHTML="User ID Please Enter Letters Only"; validForm = false;
    }


if(!userPassword.match(validateLetters)){
    document.getElementById("id4").innerHTML="Password Please Enter Letters Only"; validForm = false;
    }
}catch(e){alert(e);}
    return false;
}
</script>
</head>
<body>
<form method="post" onsubmit="return myFunction();" id="myForm" name="myForm">
FirstName<input type="text" id="userFirstName"/><br /><br /><p id="id1"></p>
LastName<input type="text" id="userLastName"/><br /><br /><p id="id2"></p>
UserId<input type="text" id="userId"/><br /><br /><p id="id3"></p>
Password<input type="text" id="userPassword"/><br /><br /><p id="id4"></p>
<input type="submit" value="Submit" />
</form>
</body>
1 Like
5

@WolfShade

Awesome exactly I am looking for
Thanks

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.