Hello, I am new to the forum and also on learning about PHP for my class. I have project that I have to enter First name, last name, email, and phone number and output returns the typed values if all 4 textfiields are filled.
I have a function ‘validate3()’ in script that gets called from ‘onsubmit’ that check to see if the 4 informations asked were filled, and if not, it returns message ‘required field’ next to the corresponding textfield.
Validate3() also creates an element before
with id=‘idFnameBr’, and insert the output ‘required filed’ in its innerHTML.
The problem is that everytime I click ‘submit’ without filling all textboxes, ‘required field’ is outputted and keeps getting extended next to each other. I am confused on why it is doing so because, from my belief, it shouldn’t since all the elements ‘elemFnameSpan, elemFnameParentBr,etc’ are created within the function ‘validate3’, not as global variables.
<script>
function validate3(){
alert ("1validate3 called");
var elemFnameSpan = document.createElement("span");
var elemFnameBr = document.getElementById("idFnameBr");
var elemFnameBrParent = elemFnameBr.parentNode;
elemFnameBrParent.insertBefore(elemFnameSpan,elemFnameBr);
elemFnameSpan.id = "idFnameErr";
elemFnameSpan.style.color="red";
elemFnameSpan.innerHTML="";
var elemFname=document.getElementById("idFname");
var elemFnameValue = elemFname.value;
var errorFlag=false;
if (elemFnameValue == null || elemFnameValue ==""){
elemFnameSpan.innerHTML ="required field";
return false;
}
else{
elemFnameSpan.innerHTML="";
}
if(errorFlag==true){
return false;
}
return true;
}
</script>
<form onsubmit="return validate3()" action = "ContactInfo.php">
First Name<span style="color:red">*</span>
<input type="text" name = "Fname" size = "10" id="idFname" />
<br id="idFnameBr" >
<input type="submit" name="submit" value="Submit" /><br>
Sorry for any difficulties understanding my question and issue but fill free to ask me for clarification.
I have been stuck on this problem so long.
