Javascript form validation and show the input/selected result below the submit button [Archive]

View Full Version : Javascript form validation and show the input/selected result below the submit button

itmehedi

07-09-2015, 09:55 AM

Need to do:

1) If user forget/miss one or more field then should show errors when click submit button.<br>
2) Show those input/selected the result below the submit button.
<br>

What I did:

1) In the first and last name field I used html5 tag "required" to show error.<br>
2) I added javascript code for next 4 field. Actually, it works but it works for first radio field only. But if i delete for that specific radio field code then it will works next field select option code only...Similarly is happen next two field.
Don't understanding why not showing all errors at same time?
<br>
3) For showing result, I coded for first name, last name and gender but it is not working. And I don't understanding how to code for selected option value and checked box for showing result.

Any help?





function showInput() {

// No:1 For radio button code
var elem = document.forms["formSurvey"].elements['sex'];
len = elem.length-1;
chkvalue = "";
for(i=0; i<=len; i++) {
if(elem[i].checked)chkvalue = elem[i].value;
}
if(chkvalue=="") {
document.getElementById("errorg1").innerHTML = "NO button Checked";
return false;
} else {
var gendershow = document.getElementById("gendershow1").value;
document.getElementById("gendershow1").innerHTML = gendershow;
return true;
}

// No:2 For select option button code

if(document.getElementById("choose").value=="") {
document.getElementById("errorChoose").innerHTML = "Please select session!";
return false;
} else {
var sessionShow1 = document.getElementById("selectSession").value;
document.getElementById("selectSession").innerHTML = sessionShow1;
return true;
}

// No:3 For Check button code
var allchecked = 0;
if(document.getElementById("int").checked)allchecked = 1;
if(document.getElementById("sch").checked)allchecked = 1;
if(document.getElementById("cur").checked)allchecked = 1;
if(allchecked == 0) {

document.getElementById("errorg2").innerHTML = "Please check the value";
return false;
} else {
var checkIt = document.getElementById("checkButton").value;
document.getElementById("checkButton").innerHTML = checkIt;
return true;
}

// No:4 Show the input/selected result

var first_name = document.getElementById("fname").value;
document.getElementById("display_fname").innerHTML = first_name;

var last_name = document.getElementById("lname").value;
document.getElementById("display_lname").innerHTML = last_name;
var tellGender = document.getElementByName("sex").value;
document.getElementById("gendershow1").innerHTML = tellGender;
}



<!DOCTYPE html>
<html>
<head>
<title>CSE </title>

</head>
<body>

<div class="content">


<p>
<form name="formSurvey" onsubmit="return showInput()" action="index.html" method="post">

<p>First name: <input type="text" name="fname" id="fname" required> </p>
<p>Last name: <input type="text" name="lname" id="lname" required></p>
<br>

<h4> Gender:</h4>

<p><input type="radio" name="sex" value="Male" id="gender1"> Male</p>
<p><input type="radio" name="sex" value="Female" id="gender2" > Female</p>
<p><input type="radio" name="sex" value="Prefer" id="gender3" > Prefer not to include</p>
<p><span style="color:red;" id="errorg1"></span></p>
<br>

<h4> Which semester do you plan on attending?</h4>

<select id="choose">

<option value="">Choose a session</option>
<option value="summer">Summer 2015</option>
<option value="fall">Fall 2015</option>
<option value="spring">Spring 2016</option>

</select>
<p><span style="color:red;" id="errorChoose"></span></p>
<br>

<h4>How did you hear about PSU?</h4>
<p><span style="color:red;" id="errorg2"></span></p>

<p><input type="checkbox" name="pt" value="Internet" id="int"> Internet Site</p>
<p><input type="checkbox" name="pt" value="School Fair" id="sch" > While attending school fair.</p>
<p><input type="checkbox" name="pt" value="Current Student" id="cur"> Current Student of PSU</p><br>

<input type="submit" value="Submit">
<br>

</form>

<p><span id="display_fname"></span></p>
<p><span id="display_lname"></span></p>

<p><span id="gendershow1"></span></p>
<p><span id="selectSession"></span></p>
<p><span id="checkButton"></span></p>

</p>

</div>

<script src="script.js"></script>
</body>
</html>

vwphillips

07-09-2015, 12:17 PM

itmehedi

07-09-2015, 03:35 PM

Thank you for your help. Now showing all error but main problem is that when I click on submit button it shows nothing means all result become disappear below of the button.( I wanted to show all 6 input/selected result below of the button). I told in my post I don't know how code work for "Check button" result and "selected option" result. You may be also forget to do that.
I am facing problem because i don't know how will code work.

Thank you again

vwphillips

07-10-2015, 01:33 PM

check box changes

function showInput() {

// No:1 For radio button code
var elem = document.forms["formSurvey"].elements['sex'],rtn=true;
len = elem.length-1;
chkvalue = "";
for(i=0; i<=len; i++) {
if(elem[i].checked)
chkvalue = elem[i].value;
}
if(chkvalue=="") {
document.getElementById("errorg1").innerHTML = "NO button Checked";
rtn=false;
} else {
var gendershow = document.getElementById("gendershow1").value;
document.getElementById("gendershow1").innerHTML = gendershow;
}

// No:2 For select option button code

if(document.getElementById("choose").value=="") {
document.getElementById("errorChoose").innerHTML = "Please select session!";
rtn=false;
} else {
var sessionShow1 = document.getElementById("choose").value;
document.getElementById("selectSession").innerHTML = sessionShow1;
}

// No:3 For Check button code
var allchecked = [];
if(document.getElementById("int").checked){
allchecked.push( document.getElementById("int").value);
}
if(document.getElementById("sch").checked){
allchecked.push(document.getElementById("sch").value);
}
if(document.getElementById("cur").checked){
allchecked.push(document.getElementById("cur").value);
}
if(allchecked.length== 0) {
document.getElementById("errorg2").innerHTML = "Please check the value";
rtn=false;
} else {
document.getElementById("checkButton").innerHTML = allchecked;
}

// No:4 Show the input/selected result

var first_name = document.getElementById("fname").value;
document.getElementById("display_fname").innerHTML = first_name;

var last_name = document.getElementById("lname").value;
document.getElementById("display_lname").innerHTML = last_name;
//var tellGender = document.getElementByName("sex").value;
document.getElementById("gendershow1").innerHTML = chkvalue//tellGender;
return rtn;
}