Javascript-Validierung für meine Berichtsseite

Question

Ich habe eine Tabelle, wo ich Berichte erstelle. Ich muss Javascript-Validierung für diesen einen Bericht schreiben. Leider ist mein Javascript sehr schwach. Ich habe die serverseitige Validierung an Ort und Stelle, aber ich muss auch Javascript-Validierung haben. Meine Seite ist wie folgt ...

<tr> 
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1' onSubmit="ValidateForm(this.form);"> 
<td nowrap="nowrap"> 
Medicaid Residents 
</td> 
<td style="width: 5%;"> 
    <table style="width: 5%;"> 
    <tr> 
     <td style="width: 5%;"><br><br> 
     <input type="radio" name="choice" value='1' onClick="check_radio()";>All<br><br> 
     <input type="radio" name="choice" value='2' onClick="check_radio()";>States<br><br> 
     <input type="radio" name="choice" value='3' onClick="check_radio()";>Communities 
     </td> 
     <td style="width: 5%;"> 
<select name="stateprompt1" multiple="multiple" size="10" id="T1"> 
    <cfloop query="Medicaid_States"> 
     <option value="#Medicaid_States.State_Code#">#Medicaid_States.State_Code#</option> 
    </cfloop> 
</select> 
    </td> 
     <td style="width: 10%;"> 
    <select name="houseprompt1" multiple="multiple" size="10" id="T2"> 
    <cfloop query="Medicaid_Houses"> 
     <option value="#Medicaid_Houses.iHouse_ID#">#Medicaid_Houses.Community# </option> 
    </cfloop> 
</select> 
    </td> 
    </tr> 
    </table> 
    </td> 
<td> 
<table style="width: 5%;"> 
    <tr> 
     <td> 
    From 
     </td> 
    </tr> 
    <tr> 
     <td> 

    <input type="text" id="txtFromDate" name="dateprompt1"> 
     </td> 
    </tr> 
    <tr> 
      <td>&nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td> 
     To 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text" id="txtToDate" name="dateprompt2"> 
     </td> 
    </tr> 
</table> 
</td> 
<td> 
<input type="Submit" name="Go" value="GO" style="font-size: 12; color: navy; height: 20px; width: 60px;"> 
</td> 
</form> 
</tr> 

Die Javascript ich geschrieben habe, ist ...

<script LANGUAGE="JavaScript"> 
function ValidateForm(form){ 

if ((form.choice[0].checked == false) && (form.choice[1].checked == false) && (form.choice[2].checked == false)) 
{ 
alert ("Please first select a radiobutton"); 
return false; 
} 
elseif ((form.choice[1].checked == True) && (document.getElementById("T1").value=="")) 
{ 
alert ("Please select a State"); 
return false; 
} 
elseif ((form.choice[2].checked == True) && (document.getElementById("T2").value=="")) 
{ 
alert ("Please select a House"); 
return false; 
} 
elseif ((document.dateprompt1.value =="") && (document.dateprompt2.value=="")) 
{ 
alert ("please select 'From' and 'To' dates"); 
return false; 
} 
} 
</script> 

... aber es funktioniert nicht. Ich weiß, dass das Javascript schlecht geschrieben ist. Ich würde jede Hilfe bei der Arbeit zu schätzen wissen!

Answer 1

Anstatt eine Reihe von Aussagen else haben haben nur die if Aussagen, weil sie es mit den return false zu stoppen, und die grünen/geben Pfad/Aktion ist an der Unterseite.

function ValidateForm(){ 
 

 
    var a = document.forms["MedicaidResidents"]["choice"].value; 
 
    var b = document.forms["MedicaidResidents"]["stateprompt1"].value; 
 
    var c = document.forms["MedicaidResidents"]["houseprompt1"].value; 
 
    
 
    var d = document.forms["MedicaidResidents"]["dateprompt1"].value; 
 
    var e = document.forms["MedicaidResidents"]["dateprompt2"].value; 
 
    
 
    if (a == null || a == "") {  
 
    alert("Please first select a radiobutton"); 
 
    return false; 
 
    } 
 
    
 
    if (b == null || b == "") {  
 
    alert("Please select a State"); 
 
    return false; 
 
    } 
 
    
 
    if (c == null || c == "") {  
 
    alert("Please select a House"); 
 
    return false; 
 
    } 
 
    
 
    if (d == null || d == "" && e == null || e == "") {  
 
    alert("please select 'From' and 'To' dates"); 
 
    return false; 
 
    } 
 
    
 
    return true; 
 

 
}

<tr> 
 
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1' onSubmit="return ValidateForm();"> 
 
<td nowrap="nowrap"> 
 
Medicaid Residents 
 
</td> 
 
<td style="width: 5%;"> 
 
    <table style="width: 5%;"> 
 
    <tr> 
 
     <td style="width: 5%;"><br><br> 
 
     <input type="radio" name="choice" value='1' onClick="check_radio()">All<br><br> 
 
     <input type="radio" name="choice" value='2' onClick="check_radio()">States<br><br> 
 
     <input type="radio" name="choice" value='3' onClick="check_radio()">Communities 
 
     </td> 
 
     <td style="width: 5%;"> 
 
<select name="stateprompt1" multiple="multiple" size="10" id="T1"> 
 
    <cfloop query="Medicaid_States"> 
 
     <option value="#Medicaid_States.State_Code#">#Medicaid_States.State_Code#</option> 
 
    </cfloop> 
 
</select> 
 
    </td> 
 
     <td style="width: 10%;"> 
 
    <select name="houseprompt1" multiple="multiple" size="10" id="T2"> 
 
    <cfloop query="Medicaid_Houses"> 
 
     <option value="#Medicaid_Houses.iHouse_ID#">#Medicaid_Houses.Community# </option> 
 
    </cfloop> 
 
</select> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
<td> 
 
<table style="width: 5%;"> 
 
    <tr> 
 
     <td> 
 
    From 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 

 
    <input type="text" id="txtFromDate" name="dateprompt1"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
      <td>&nbsp; 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     To 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" id="txtToDate" name="dateprompt2"> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</td> 
 
<td> 
 
<input type="Submit" name="Go" value="GO" style="font-size: 12; color: navy; height: 20px; width: 60px;"> 
 
</td> 
 
</form> 
 
</tr>

https://jsbin.com/kawewerisu/1/edit?html,js,output