I'm trying to make a form in which, when the user fills out all fields, the output results in a compilation of all of their entered data. The form connects to a php file and it runs just fine, however when I tried to add validation the submit acts strangely. Basically my "Validation" is made of multiple if statements with one else. The title and content validation are in perfect working order,but when it comes to the type it submits the form anyway.
Any suggestions?
HTML Code:
<body>
<form id="documentationForm" action="testingPHP2.php" method="post">
<figcaption><p><strong>Instructions:</strong></p><p><i>Fill out the information as needed below. Place each step on a new line. When you are finished,<br>submit the document and download the file.</p></i></figcaption>
<strong>Title:</strong><input id="docTitle" type="text" name="docTitle"><span id="errorTitle"></span> <br>
<strong>Type:</strong>
<select id="docType" onchange="adaptiveLabel()" name="docType"><br>
<option value="" selected>Select Document Type</option>
<option value="Procedure">Procedure</option>
<option value="Instruction">Instruction</option>
<option value="Form">Form</option>
</select><span id="errorType"></span>
<br>
<script>
function adaptiveLabel(){
var chosenType=document.getElementById("docType");
var chosenTypeVal=chosenType.value;
var x=document.getElementById("contentLabel");
if (chosenTypeVal=="Procedure"){
x.innerHTML="Procedural Steps:";
}
if(chosenTypeVal=="Instruction"){
x.innerHTML="Steps:"
}
if(chosenTypeVal=="Form"){
x.innerHTML="Form Parts:";
}
if (chosenTypeVal==" "){
x.innerHTML=" ";
}
}
function submitInputs(){
var errorTitletext = document.getElementById("docTitle");
var errorTitleLable=document.getElementById("errorTitle");
var errorContenttext = document.getElementById("docInput");
var errorContentLabel=document.getElementById("errorContent");
var errorTypetext=document.getElementById("docType");
var errorTypetextLable=document.getElementById("errorType");
if (errorTypetext.value===""){
alert("You must select a type");
errorTypetextLable.innerHTML="*Please select a type";
errorTypetextLable.style.color="red";
}
if (errorTypetext.value==="Procedure" || errorTypetext.value==="Form" || errorTypetext.value==="Instruction" ){
errorTypetextLable.innerHTML="";
errorTypetextLable.style.color="";
}
if(errorTitletext.value.length===0||errorTitletext.value===" "){
alert("You must create a title");
errorTitleLable.innerHTML="*Please create a title";
errorTitleLable.style.color="red";
}
if(errorTitletext.value.length>0){
errorTitleLable.innerHTML="";
errorTitleLable.style.color="";
}
if (errorContenttext.value.length===0){
alert("You must enter content");
errorContentLabel.innerHTML="*Please enter content";
errorContentLabel.style.color="red";
}
if (errorContenttext.value.length>0){
errorContentLabel.innerHTML="";
errorContentLabel.style.color="";
}
else{
document.getElementById("documentationForm").submit();
}
}
</script>
<strong><span id="contentLabel"></span><span id="errorContent"></span></strong><br><textarea style="width: 500px; height: 250px;" id="docInput" name="docInput"></textarea><br>
<input type="button" onclick="submitInputs()" value="Create Document">
<input type="submit" value="Default Submit">
</form>
</body>
Aucun commentaire:
Enregistrer un commentaire