vngx
May 18, 2015, 2:18pm
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
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,
vngx
May 18, 2015, 2:59pm
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
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
vngx
May 18, 2015, 3:43pm
5
@WolfShade
Awesome exactly I am looking for
Thanks
1 Like
system
Closed
August 17, 2015, 10:56pm
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.