Why I cannot validate User ID?

Why I cannot validate User ID? - javascript

Here I tried to validate the User Id using JavaScript for a form. But I could not get the expected message. You can see my code below the description. can you help me to find the wrong that I have done?
<html>
<head>
<script>
function formValidation(uid) {
var numbers = /^[0-9]/;
if (uid.value == "") {
alert('Empty values are not allowed.');
return false;
}
else if (numbers.test(uid.value) == false) {
alert('Please input numbers only');
return false;
}
else if (userid_validation(uid, 5, 12) == false) {
return false;
}
else {
return true;
}
}
function userid_validation(uid, mx, my) {
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx) {
alert("length be between " + mx + " to " + my);
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<form name="form1" onsubmit="return formValidation(this)">
<table>
<tr>
<td>
*Enter valid ID :
</td>
<td>
<input type="text" name="userid"></input>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit" />
</td>
</tr>
</table>
</body>
</form>
</html>

Your uid OBJECT is equal to the form element. To get the input value you need to assign an id for it. and also the RegEx for numbers /^[0-9]/ main that any input starting with number it will return true for (12ABCD). To get only numbers use /^\d+$/ or /^[0-9]+/.
<script>
function formValidation(uid) {
var numbers = /^[0-9]+$/;
if (uid.userid.value == "") {
alert('Empty values are not allowed.');
return false;
}
else if (numbers.test(uid.userid.value) == false) {
alert('Please input numbers only');
return false;
}
return (userid_validation(uid, 5, 12));
}
function userid_validation(uid, mx, my) {
var uid_len = uid.userid.value.length;
if (uid_len >= my || uid_len < mx) {
alert("length be between " + mx + " to " + my);
return false;
}
return true;
}
</script>
I add the id="userid" in input tag.
<form name="form1" onsubmit="return formValidation(this)">
<table>
<tr>
<td>
*Enter valid ID :
</td>
<td>
<input type="text" name="userid" id="userid"></input>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit" />
</td>
</tr>
</table>
</form>

Related

Using JavaScript Spring MVC Client Side Validation

I am new to Spring MVC and JavaScript and I am trying to validate a view using JavaScript (client side). Validation is working, but the problem is, when the error occurs, I am unable to stop form submission. It's going to post method.
How can I stop the submission if error occurs?
My view is registration.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="<c:url value="/resources/js/j.js" />"></script>
<title>Insert title here</title>
</head>
<body>
<h2>Please,Do Registration</h2>
<form:form id="form" method="POST" action="/spring-ex02/user/reg"
commandName="login" >
<table>
<tr>
<td><form:label path="email">Email</form:label></td>
<td><form:input id="email" path="email" /></td>
<td><font id="emailError" style="color: red;">${emailExistError}
</font></td>
</tr>
<tr>
<td><form:label path="password">Password</form:label></td>
<td><form:input id="password" path="password" type="password"
/></td>
<td><font id="passwordError" style="color: red;">${passwordError}
</font></td>
</tr>
<tr>
<td><form:label path="confirmPassword">Confirm Password</form:label>
</td>
<td><form:input id="confirmPassword" path="confirmPassword"
type="password" /></td>
<td><font id="confirmPasswordError" style="color: red;"></font>
</td>
</tr>
<tr>
<td><form:label path="userDetail.firstname">First Name</form:label>
</td>
<td><form:input id="firstName" path="userDetail.firstname" /></td>
<td><font id="firstNameError" style="color: red;"></font>
</td>
</tr>
<tr>
<td><form:label path="userDetail.lastname">Last Name</form:label>
</td>
<td><form:input id="lastName" path="userDetail.lastname" /></td>
<td><font id="lastNameError" style="color: red;"></font> </td>
</tr>
<tr>
<td><form:label path="userDetail.address">Address</form:label></td>
<td><form:input id="address" path="userDetail.address" /></td>
<td><font id="addressError" style="color: red;"></font> </td>
</tr>
<tr>
<td><form:label path="userDetail.contact">Contact</form:label></td>
<td><form:input id="contact" path="userDetail.contact" /></td>
<td><font id="contactError" style="color: red;"></font>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="validate()" value="Sign Up"/>
</td>
</tr>
</table>
</form:form>
<form action="/spring-ex02/" method = GET>
<input type="submit" value="Back to Home">
</form>
</body>
</html>
My js file is J.js
function validate(){
var f=document.getElementById("form");
validateEmail(f);
validatePassword(f);
firstNameValidate(f);
lastNameValidate(f)
addressValidate(f);
contactValidate(f)
}
function validateEmail(form){
var error=document.getElementById("emailError");
var email=form["email"].value;
error.innerHTML="";
var regx = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|
(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-
Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if( email==null || email==""){
error.innerHTML="Input Your Email";
}
else if(!email.match(regx)){
error.innerHTML="Invalid Email";
}
}
function validatePassword(form){
var error1=document.getElementById("passwordError");
var error2=document.getElementById("confirmPasswordError");
error1.innerHTML="Give Password";
var password=form["password"].value;
error1.innerHTML="";
error2.innerHTML="";
var confirmPassword=form["confirmPassword"].value;
if( password==null || password==""){
error1.innerHTML="Give Password";
}
else if( confirmPassword==null || confirmPassword==""){
error2.innerHTML="Confirm Password";
}
else if(password.length<5 || password.length>10){
error1.innerHTML="Password has to be 5 to 10 chars"
}
else if(password != confirmPassword){
error2.innerHTML="Password Does Not Match"
}
}
function firstNameValidate(from){
var error=document.getElementById("firstNameError");
var firstName=form["firstName"].value;
error.innerHTML="";
if( firstName==null || firstName==""){
error.innerHTML="Input Your FirstName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(firstName.length<5 || firstName.length>10){
error1.innerHTML="Name has to be 5 to 10 chars"
}
}
function lastNameValidate(from){
var error=document.getElementById("lastNameError");
var lastName=form["lastName"].value;
error.innerHTML="";
if( lastName==null || lastName==""){
error.innerHTML="Input Your LastName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(lastName.length<5 || lastName.length>10){
error1.innerHTML="Name has to be 5 to 10 chars"
}
}
function addressValidate(from){
var error=document.getElementById("addressError");
var address=form["address"].value;
error.innerHTML="";
if( address==null || address==""){
error.innerHTML="Input Your Address";
}
else if(!isNaN(id)){
error.innerHTML="Address Can Not be a number";
}
else if(address.length<5 || address.length>10){
error1.innerHTML="Address has to be 5 to 10 chars"
}
}
function contactValidate(from){
var error=document.getElementById("contactError");
var contact=form["contact"].value;
error.innerHTML="";
if( contact==null || contact==""){
error.innerHTML="Input Your Contact";
}
else if(isNaN(id)){
error.innerHTML="Name Can Not be alphabate";
}
else if(contact.length<5 || contact.length>10){
error1.innerHTML="Contact has to be 5 to 10 chars"
}
}

Problem is your are not cancelling the form submit event.
To cancel form submit, with few changes, try this out.
<input type="submit" onclick="return validate()" value="Sign Up"/> <!-- added `return` -->
Also you need to modify your script as, false return value will cancel the event:
function validate(){
var f=document.getElementById("form");
return (validateEmail(f) &
validatePassword(f) &
firstNameValidate(f) &
lastNameValidate(f) &
addressValidate(f) &
contactValidate(f));
}
You need to modify validation functions as well to return boolean value.
function validateEmail(form){
//your validaton logic
return "" === error.innerHTML;
}
Same has to be done for the rest of the functions

Consolidate your validation methods. On failure use event.preventDefault()

assign return parameter to each of the validation function.
Below is the updated code for J.js
function validate(){
var f=document.getElementById("form");
var hasEmailError = validateEmail(f);
var hasPasswordError = validatePassword(f);
var hasFirstNameError = firstNameValidate(f);
var hasLastNameError = lastNameValidate(f)
var hasAddressError = addressValidate(f);
var hasContactError = contactValidate(f);
if(!hasEmailError || !hasPasswordError || !hasFirstNameError || !hasLastNameError || !hasAddressError || !hasContactError)
return false;
else
return true;
}
function validateEmail(form){
var error=document.getElementById("emailError");
var email=form["email"].value;
error.innerHTML="";
var regx = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|
(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-
Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if( email==null || email==""){
error.innerHTML="Input Your Email";
}
else if(!email.match(regx)){
error.innerHTML="Invalid Email";
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}
function validatePassword(form){
var error1=document.getElementById("passwordError");
var error2=document.getElementById("confirmPasswordError");
error1.innerHTML="Give Password";
var password=form["password"].value;
error1.innerHTML="";
error2.innerHTML="";
var confirmPassword=form["confirmPassword"].value;
if( password==null || password==""){
error1.innerHTML="Give Password";
}
else if( confirmPassword==null || confirmPassword==""){
error2.innerHTML="Confirm Password";
}
else if(password.length<5 || password.length>10){
error1.innerHTML="Password has to be 5 to 10 chars"
}
else if(password != confirmPassword){
error2.innerHTML="Password Does Not Match"
}
if(error1.innerHTML.length > 0 || error2.innerHTML.length > 0)
return false;
else
return true;
}
function firstNameValidate(from){
var error=document.getElementById("firstNameError");
var firstName=form["firstName"].value;
error.innerHTML="";
if( firstName==null || firstName==""){
error.innerHTML="Input Your FirstName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(firstName.length<5 || firstName.length>10){
error.innerHTML="Name has to be 5 to 10 chars"
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}
function lastNameValidate(from){
var error=document.getElementById("lastNameError");
var lastName=form["lastName"].value;
error.innerHTML="";
if( lastName==null || lastName==""){
error.innerHTML="Input Your LastName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(lastName.length<5 || lastName.length>10){
error.innerHTML="Name has to be 5 to 10 chars"
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}
function addressValidate(from){
var error=document.getElementById("addressError");
var address=form["address"].value;
error.innerHTML="";
if( address==null || address==""){
error.innerHTML="Input Your Address";
}
else if(!isNaN(id)){
error.innerHTML="Address Can Not be a number";
}
else if(address.length<5 || address.length>10){
error.innerHTML="Address has to be 5 to 10 chars"
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}
function contactValidate(from){
var error=document.getElementById("contactError");
var contact=form["contact"].value;
error.innerHTML="";
if( contact==null || contact==""){
error.innerHTML="Input Your Contact";
}
else if(isNaN(id)){
error.innerHTML="Name Can Not be alphabate";
}
else if(contact.length<5 || contact.length>10){
error.innerHTML="Contact has to be 5 to 10 chars"
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}

Radio button validation (alert box) confirmation and rejection

I'm working on a HTML document which is an exam submission form. I've completed almost all of the set tasks however, I'm having trouble validating radio buttons. I've searched on stackoverflow however, the answers do not meet the criteria of the question. My completed code is shown below.
I'm having trouble with the bold part of this task:
Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Below is the code working, excluding the validation of the radio buttons. Seperatley, I have the code which doesn't work when implemented into the function validateForm().
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.ExamEntry.examno.value == "") {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examno.focus();
document.getElementById('examinationno').style.color = "red";
result = false;
}
if (document.ExamEntry.examno.value.length!== 4) {
msg+="Your Examination Number should be 4 digits.\n";
document.ExamEntry.examno.focus();
document.getElementById('examinationno').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr></tr>
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td id="examinationno">Examination Number</td>
<td>
<input type="text" name="examno" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="examtype" value="GCSE" />GCSE</td>
</tr>
<tr>
<td>
<input type="radio" name="examtype" value="AS" />AS</td>
</tr>
<tr>
<td>
<input type="radio" name="examtype" value="A2" />A2</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onClick="return validateForm();" />
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
Based on the current code, why won't the following validate when added into the function?:
if(document.getElementById('GCSE').checked)
{examtype = "GCSE";
}
if(document.getElementById('AS').checked)
{examtype = "AS";
}
if(document.getElementById('A2').checked)
{examtype = "A2";
}
if(confirm("You have selected"+examtype+.Continue?")){
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
else{
alert("Action cancelled");
return false;
}

// Retrieving the checked radio button value
function getRadioValue (frmName, rbGroupName)
{
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++)
{
if (radios[i].checked)
{
return radios[i].value;
}
}
return false;
}
Call the getRadioValue() inside validateForm()
// examtype gets false or GCSE or AS or A2
var examtype = getRadioValue ("ExamEntry", "examtype");

"Continue" is a keyword. So you have to wrap it in apostrophes("). I could not get the structure of if-statements, I made some changes. I hope this is what you are looking for..
if(confirm("You have selected"+examtype+". Continue?")){
if(msg==""){
alert(msg);
return result;
}
else{
alert("Action cancelled");
return false;
}
}

Resetting Radio Buttons

Here is a fiddle containing my code - http://jsfiddle.net/jamiepollard28/sDLV4/8/
I am trying to make my code reset the radio buttons only when the user clicks cancel on the alert box of validation for the radio buttons.
When you click submt containing the required data with a radio button selected a alert box will come up confirming or rejecting the choice, when i click cancel on that alert box i want the radio button selection to reset.
Below is my code.
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.onload=function(){
window.validateForm=function() {
var result = true;
var msg = "";
var focusname="";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
focusname="name";
//document.ExamEntry.name.focus();
document.getElementById('name1').style.color = "red";
//result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
// document.ExamEntry.subject.focus();
if (focusname=="")
{
focusname="subject";
}
document.getElementById('subject1').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (Number == "") {
msg += "You must enter the exam Number \n";
//document.ExamEntry.Exam_Number.focus();
if (focusname=="")
{
focusname="Exam_Number";
}
document.getElementById('Exam_Number1').style.color = "red";
//result = false;
}else if (Number.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
if (focusname=="")
{
focusname="Exam_Number";
}
//document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number1').style.color = "red";
//result = false;
}
else if (isNaN(Number)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
if (focusname=="")
{
focusname="Exam_Number";
}
// document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number1').style.color = "red";
//result = false;
}
var valchecked = '';
var len = document.getElementsByName('examtype').length;
for (i = 0; i < len; i++) {
if ( document.ExamEntry.examtype[i].checked ) {
valchecked = document.ExamEntry.examtype[i].value;
break;
}
}
if (valchecked == '') {
msg += "Select Exam Type";
document.getElementById('Exam_Type').style.color = "red";
if (focusname=="")
{
focusname="examtype_GCSE";
}
}
if (msg != ""){
alert(msg)
document.getElementById(focusname).focus();
return false;
}else{
return confirm('You have chosen ' + valchecked + ' is this correct?');
}
}
}//]]>
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name1">Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td id="subject1">Subject</td>
<td><input type="text" name="subject" id="subject"/></td>
</tr>
<tr>
<td id="Exam_Number1">Exam Number</td>
<td><input type="text" name="Exam_Number" id="Exam_Number" ><font size="3">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td id="Exam_Type">Exam Type</td>
<tr><td><input type="radio" id="examtype_GCSE" name="examtype" value="GCSE" /> : GCSE<br /></tr>
<tr><td><input type="radio" id="examtype_AS" name="examtype" value="AS"/> : AS<br /></tr>
<tr><td><input type="radio" id="examtype_A2" name="examtype" value="A2" /> : A2<br /></tr>
<tr><td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

You are simply returning the users choice, you need to first check it, if it is true return true for form submission else reset radio and return false, as follows: FIDDLE
var ch= confirm('You have chosen ' + valchecked + ' is this correct?');
if(!ch){
document.getElementById('examtype_'+valchecked).checked= false;
return false; }
else
return true;
}

With an if loop you can solve the issue
try following code
if(confirm('You have chosen ' + valchecked + ' is this correct?')){
return true;
}
else{
document.getElementById('examtype_'+valchecked).checked= false;
return false;
}

Confirmation of radio buttons

I have all ready inserted the validation for the radio button and now all i need is to have a alert box to come up before the code proceeds asking "Are you sure you want to pick 'x'" when x would be the level selected. And if cancel is pressed it returns to the webpage.
Thank you are here is my code below.
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
}
if (document.ExamEntry.number.value == "") {
msg += "You must enter a exam number \n";
document.ExamEntry.number.focus();
document.getElementById('number').style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if ((document.ExamEntry.level[0].checked == false) && (document.ExamEntry.level[1].checked == false) && (document.ExamEntry.level[2].checked == false)) {
msg += "You mus select the level entered \n";
result = false;
}
}
function CheckField(obj) {
if (obj.value.length < '4') {
alert('Name field must 4 character long');
obj.focus();
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="number">Examination Number</td>
<td><input type="text" name="number" maxlength="4" onblur="CheckField(this)"/></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<input type="radio" name="level">GCSE
<input type="radio" name="level">AS
<input type="radio" name="level">A2
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /> </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

Hope this helps to get along.
<!DOCTYPE html>
<html>
<head>
<title>Exam entry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
var objx;
// test for empty inputs
objx = document.getElementById("subjectInput");
if (objx.value.length == 0) {
msg += "You must enter the subject \n";
objx.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
objx = document.getElementById("numberInput");
if (objx.value.length == 0) {
msg += "You must enter a exam number \n";
objx.focus();
document.getElementById('number').style.color = "red";
result = false;
}
objx = document.getElementById("nameInput");
if (objx.value.length == 0) {
msg += "You must enter your name \n";
objx.focus();
document.getElementById('name').style.color = "red";
result = false;
}
// checked level is needed below for confirmation
var objx = document.ExamEntry;
var checkedLevel = "";
if (objx.level[0].checked) {
checkedLevel = objx.level[0].value;
}
else
if (objx.level[1].checked) {
checkedLevel = objx.level[1].value;
}
else
if (objx.level[2].checked) {
checkedLevel = objx.level[2].value;
}
if (checkedLevel.length == 0) {
msg += "You must select the level entered \n";
result = false;
}
if (result) {
// test for minimum length of name
objx = document.getElementById("nameInput");
if (objx.value.length < 4)
{
objx.focus();
document.getElementById('name').style.color = "red";
//alert('Name field must 4 character long');
msg += 'Name field must be 4 characters long'
result = false;
}
}
// confirm checked level
if (result) {
result = confirm("Are you sure you want to pick '" + checkedLevel + "' ?");
}
else {
alert(msg);
}
return result;
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" onsubmit="return validateForm();" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" id="nameInput" /></td>
</tr>
<tr>
<td id="number">Examination Number</td>
<td><input type="text" name="number" id="numberInput" maxlength="4" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" id="subjectInput" /></td>
</tr>
<tr>
<input type="radio" name="level" value="GCSE">GCSE
<input type="radio" name="level" value="AS">AS
<input type="radio" name="level" value="A2">A2
<tr>
<td><input type="submit" name="Submit" value="Submit" /> </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

How to validate enter key in Javascript?

I have following script running on my site. Users have to enter "testnumber" which is 10 character long. There is a length check validation. When users click on submit button my script does work smoothly.
But the problem is that when users press the enter key instead of mouse click, it does not warn the users. How can i change it so that when the users press the enter key this script will give the same message as they click on submit button?
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation(form) {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length == 10) {
if (isNumber(value)) {
isSubmitting = true;
}
}
if (isSubmitting) {
form.submit();
}
else {
alert('testnumber must be at least 10 character.');
return false;
}
}
</script>
This is the part of the html code:
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
</tr>

Hope this will help
<from onsubmit="return formvalidation()">
<tr>
<td align="center">
<label>
<div align="left">
<span class="text7"><strong>enter testnumber:</strong></span>
<input name="testnumber" type="text" id="testnumber" size="50" value="<%=(testnumber)%>" />
<input name="search" id="search" type="button" class="normalmail" value="Search" onclick="formvalidation(frmSearch);" />
</div>
</label>
</td>
<!-- </tr></tr> -->
</form>
Your Script
<script type="text/javascript">
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function formvalidation() {
var isSubmitting = false;
var value = document.getElementById('testnumber').value;
if (value.length > 10 && value.length < 10) {
alert('testnumber must be at least 10 character.');
return false
}
else if (isSubmitting) {
return true
}
else {
return false;
}
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

Why I cannot validate User ID? - javascript

Related

Using JavaScript Spring MVC Client Side Validation

Radio button validation (alert box) confirmation and rejection

Resetting Radio Buttons

Confirmation of radio buttons

How to validate enter key in Javascript?

Categories

Resources