本文介绍了在完成所有javascript验证后，我的表单无效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<pre><!DOCTYPE html>
<head>
<title>Internship form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="ass3.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function validation()
{
var first_name = document.getElementById('Fname').value;
var last_name = document.getElementById('Lname').value;
var myBranch = document.getElementById('branch')
var institute = document.getElementById('institute');
var mail = document.getElementById('email').value;
var Lphone = document.getElementById('Lphone').value;
var Mphone = document.getElementById('Mphone').value;
var detail = document.getElementById('detail').value;
var city = document.getElementById('city').value;
var state = document.getElementById('state').value;
var ziP = document.getElementById('zip').value;
var tenth = document.getElementById('tenth').value;
var twelth = document.getElementById('TWELTH').value;
var Discrete = document.getElementById('discrete').value;
var Algorithm = document.getElementById('algorithm').value;
var Automata = document.getElementById('automata').value;
var cpi = document.getElementById('cpi').value;
var prev = document.getElementById('prev').value;
var skills = document.getElementById('skills').value;
var languages = document.getElementById('languages').value;
var Formdate = document.getElementById('formdate').value;
function isGenderSelected() {
var checkboxes = document.getElementsByName("gender");
for (i=0 ; i < checkboxes.length ; i++ ) {
if ( checkboxes[i].checked ) {
return true;
}
}
return false;
}
function isSelected() {
var checkboxes2 = document.getElementsByName("app");
for (i=0 ; i < checkboxes2.length ; i++ ) {
if ( checkboxes2[i].checked ) {
return true;
}
}
return false;
}
function isTypeSelected() {
var checkboxes3 = document.getElementsByName("type");
for (i=0 ; i < checkboxes3.length ; i++ ) {
if ( checkboxes3[i].checked ) {
return true;
}
}
return false;
}
if(first_name == "")
{
document.getElementById('fname').innerHTML = "** Please fill this field";
return false;
}
if((first_name.length <= 2) || (first_name.length > 20) )
{
document.getElementById('fname').innerHTML = "** First name length must be between 2-20";
return false;
}
if(!isNaN(first_name))
{
document.getElementById('fname').innerHTML = "** only characters are allowed";
return false;
}
if((last_name == "") && (first_name !=""))
{
document.getElementById('lname').innerHTML = "** Please fill this field";
document.getElementById('fname').innerHTML = "";
return false;
}
if((last_name.length <= 2) || ((first_name.length > 20) && (first_name !="")))
{
document.getElementById('lname').innerHTML = "** Last name length must be between 2-20";
document.getElementById('fname').innerHTML = "";
return false;
}
if(!isNaN(last_name) && (first_name !=""))
{
document.getElementById('lname').innerHTML = "** only characters are allowed";
document.getElementById('fname').innerHTML = "";
return false;
}
if((!myBranch.value) && (last_name != ""))
{
document.getElementById('branchE').innerHTML = "Select any option";
document.getElementById('lname').innerHTML = "";
return false;
}
if (($.trim(institute.value) == '') && (myBranch.value)){
document.getElementById('InstituteE').innerHTML = "** Please fill this field.";
document.getElementById('branchE').innerHTML = "";
return false;
}
if ((isGenderSelected() == false) && ($.trim(institute.value) != '')) {
document.getElementById('Gender').innerHTML = "Please select your gender";
document.getElementById('InstituteE').innerHTML = "";
return false;
}
if((mail == "") && (isGenderSelected() == true))
{
document.getElementById('Email').innerHTML = "** Please fill this field";
document.getElementById('Gender').innerHTML = "";
return false;
}
if((mail.indexOf('@') <= 0) && (isGenderSelected() == true))
{
document.getElementById('Email').innerHTML = " ** @ Invalid position";
document.getElementById('Gender').innerHTML = "";
return false;
}
if((mail.charAt(mail.length-4)!='.') && (isGenderSelected() == true))
{
document.getElementById('Email').innerHTML = "** Invalid position";
document.getElementById('Gender').innerHTML = "";
return false;
}
if((Lphone == "") && (mail != ""))
{
document.getElementById('Landline').innerHTML = "** Please fill this field";
document.getElementById('Email').innerHTML = "";
return false;
}
if((Lphone.length != 10) && (mail != ""))
{
document.getElementById('Landline').innerHTML = "** Number must be of 10 digits";
document.getElementById('Email').innerHTML = "";
return false;
}
if((isNaN(Lphone)) && (mail != ""))
{
document.getElementById('Landline').innerHTML = "** Only digits are allowed";
document.getElementById('Email').innerHTML = "";
return false;
}
if((Mphone == "") && (Lphone != ""))
{
document.getElementById('Mobile').innerHTML = "** Please fill this field";
document.getElementById('Landline').innerHTML = "";
return false;
}
if((Mphone.length != 10) && (Lphonee != ""))
{
document.getElementById('Phone').innerHTML = "** Number must be of 10 digits";
document.getElementById('Landline').innerHTML = "";
return false;
}
if(isNaN(Mphone) && (Lphone != ""))
{
document.getElementById('Mobile').innerHTML = "** Only digits are allowed";
document.getElementById('Landline').innerHTML = "";
return false;
}
if((city == "") && (Mphone != "") )
{
document.getElementById('CityE').innerHTML = "** Please fill this field";
document.getElementById('Mobile').innerHTML = "";
return false;
}
if((state == "") && (city != ""))
{
document.getElementById('StateE').innerHTML = "** Please fill this field";
document.getElementById('CityE').innerHTML = "";
return false;
}
if((zip == "") && (state != ""))
{
document.getElementById('ZipE').innerHTML = "** Please fill this field";
document.getElementById('StateE').innerHTML = "";
return false;
}
if ((isSelected() == false) && (zip.length != 6)) {
document.getElementById('AppE').innerHTML = "Please select";
document.getElementById('ZipE').innerHTML = "";
return false;
}
if((tenth == "") && (isSelected() == true))
{
document.getElementById('TenthE').innerHTML = "** Please fill this field";
document.getElementById('AppE').innerHTML = "";
return false;
}
if((twelth == "") && (tenth !=""))
{
document.getElementById('TwelthE').innerHTML = "** Please fill this field";
document.getElementById('TenthE').innerHTML = "";
return false;
}
if((!Discreate.value) &&(twelth != ""))
{
document.getElementById('DiscreteE').innerHTML = "Select any option";
document.getElementById('TwelthE').innerHTML = "";
return false;
}
if((!Algorithm.value) && (Discreate.value))
{
document.getElementById('AlgorithmE').innerHTML = "Select any option";
document.getElementById('DiscreteE').innerHTML = "";
return false;
}
if((!Automata.value) && (Algorithm.value))
{
document.getElementById('AutomataE').innerHTML = "Select any option";
document.getElementById('AlgorithmE').innerHTML = "";
return false;
}
if((cpi == "") && (Automata.value))
{
document.getElementById('CpiE').innerHTML = "** Please fill this field";
document.getElementById('AutomataE').innerHTML = "";
return false;
}
if (($.trim(prev.value) == '') && (cpi != "")) {
document.getElementById('PrevE').innerHTML = "** Please fill this field.";
document.getElementById('CpiE').innerHTML = "";
return false;
}
if ((isTypeSelected() == false) && ($.trim(prev.value) != '')) {
document.getElementById('TypeE').innerHTML = "Please select";
document.getElementById('PrevE').innerHTML = "";
return false;
}
if (($.trim(skills.value) == '') && (isTypeSelected() == true)) {
document.getElementById('SkillsE').innerHTML = "** Please fill this field.";
document.getElementById('TypeE').innerHTML = "";
return false;
}
if (($.trim(languages.value) == '') && ($.trim(skills.value) != '')) {
document.getElementById('LanguagesE').innerHTML = "** Please fill this field.";
document.getElementById('SkillsE').innerHTML = "";
return false;
}
return true;
}
</script>
</head>
<body>
<div id="container">
<div id="wall">
<form action="" name="myForm" onsubmit="return validation()" method="POST" class="bg-light">
<h1 style="text-align: center; font-size: 52px; color: rgb(74, 247, 6)">INTERNSHIP FORM</h1><br><br>
<p>FIRST NAME : <input type="text" id="Fname" placeholder="First Name......" autocomplete="off"/>
<span id="fname" class="text-danger"></span>
LAST NAME : <input type="text" id="Lname" placeholder="Last Name........" autocomplete="off"/>
<span id="lname" class="text-danger"></span>
</p>
<br>
<p>
SELECT YOUR BRANCH :
<select id="branch" style="font-weight:bold; color:indigo">
<option value="">[choose yours]</option>
<option value="cse">Computer Science Eng.</option>
<option value="ee">Electrical Eng.</option>
<option value="mech">Mechanical Eng.</option>
<option value="mnc">Mathematics & Computing</option>
</select>
<span id="branchE" class="text-danger"></span>
</p>
<br>
<p>
NAME OF THE INSTITUTE :
<br><br>
<textarea id="institute" rows="3" cols="30" placeholder="Institute name..." style="font-weight:bold; color:indigo">
</textarea>
<span id="InstituteE" class="text-danger"></span>
DATE OF BIRTH : <input type="date" id="dob" autocomplete="off" value="2000-01-01" min="1950-01-01" max = "2001-01-01"/>
</p>
<br>
<p>
GENDER :
<input type="radio" name="gender" value="male" style="font-weight:bold; color:indigo"/> Male
<input type="radio" name="gender" value="female" style="font-weight:bold; color:indigo"/> Female
<input type="radio" name="gender" value="other" style="font-weight:bold; color:indigo"/> Other
<span id="Gender" class="text-danger"></span>
EMAIL-ID : <input type="text" id="email" placeholder="[email protected]....." autocomplete="off"/>
<span id="Email" class="text-danger"></span>
</p>
<br>
<p>
LANDLINE NO. : <input type="number" id="Lphone" placeholder="0731-24....." autocomplete="off"/>
<span id="Landline" class="text-danger"></span>
PHONE NO. : <input type="number" id="Mphone" placeholder="9926......" autocomplete="off"/>
<span id="Mobile" class="text-danger"></span>
</p>
<br>
<p>
ADDRESS :
<br><br>
<textarea id="detail" rows="4" cols="100" placeholder="Address....." style="font-weight:bold; color:indigo"></textarea>
<span id="detailE" class="text-danger"></span>
<br><br><br>
</p>
<br>
<p>
CITY <input type="text" id="city" autocomplete="off">
<span id="CityE" class="text-danger"></span>
STATE <input type="text" id="state" autocomplete="off">
<span id="StateE" class="text-danger"></span>
ZIP-CODE <input type="text" id="zip" autocomplete="off">
<span id="ZipE" class="text-danger"></span>
</p>
<br><br>
<hr style="border: 10px solid rgb(55, 95, 94); width: 98%;">
<br><br>
<p>
DO YOU APPLY FOR INTERNSHIP BEFORE ?
<input type="radio" name="app" value="YES" style="font-weight:bold; color:indigo"/> YES
<input type="radio" name="app" value="NO" style="font-weight:bold; color:indigo"/> NO<br>
<span id="AppE" class="text-danger"></span>
</p><br>
<p>
Tenth Class Percentage <input type="number" id="tenth" placeholder="in %" autocomplete="off"/>
<span id="TenthE" class="text-danger"></span><br><br>
Twelth Class Percentage <input type="number" id="twelth" placeholder="in %" autocomplete="off"/>
<span id="TwelthE" class="text-danger"></span><br><br>
</p>
<p>
GRADES IN THIS SUBJECT : <br><br>
Discrete Maths
<select id="discrete" style="font-weight:bold; color:indigo" >
<option value="">Grades</option>
<option value="AA">AA</option>
<option value="AB">AB</option>
<option value="BB">BB</option>
<option value="BC">BC</option>
<option value="CC">CC</option>
<option value="CD">CD</option>
<option value="DD">DD</option>
<option value="FR">FR</option>
</select>
<span id="DiscreteE" class="text-danger"></span>
Algorithm
<select id="algorithm" style="font-weight:bold; color:indigo" >
<option value="">Grades</option>
<option value="AA">AA</option>
<option value="AB">AB</option>
<option value="BB">BB</option>
<option value="BC">BC</option>
<option value="CC">CC</option>
<option value="CD">CD</option>
<option value="DD">DD</option>
<option value="FR">FR</option>
</select>
<span id="AlgorithmE" class="text-danger"></span>
Automata Theory
<select id="automata" style="font-weight:bold; color:indigo" >
<option value="">Grades</option>
<option value="AA">AA</option>
<option value="AB">AB</option>
<option value="BB">BB</option>
<option value="BC">BC</option>
<option value="CC">CC</option>
<option value="CD">CD</option>
<option value="DD">DD</option>
<option value="FR">FR</option>
</select>
<span id="AutomataE" class="text-danger"></span>
</p>
<br>
<p>
Current CPI <input type="number" id="cpi">
<span id="CpiE" class="text-danger"></span>
</p><br>
<p>
PLEASE PROVIDE WHAT TYPE : OF INTERNSHIP YOU APPLIED BEFORE :
<br><br>
<textarea id="prev" rows="10" cols="100" placeholder="IF YOU HAVEN'T APPLIED BEFORE PLEASE LEAVE THIS FIELD BLANK......" autocomplete="off" style="font-weight:bold; color:indigo"></textarea>
<span id="PrevE" class="text-danger"></span>
</p>
<br>
<p>
WHAT TYPE OF INTERNSHIP YOU ARE SEEKING?
<input type="radio" name="type" value="part" style="font-weight:bold; color:indigo"/> Part time
<input type="radio" name="type" value="full" style="font-weight:bold; color:indigo"/> Full time<br>
<span id="TypeE" class="text-danger"></span>
</p>
<br>
<p>
PLEASE PROVIDE WHEN YOU WANT TO JOIN ? <br><br>
Intership From: <input type="date" id="sdate" value="2018-09-26" min="2018-09-26" max = "2018-12-01" style="font-weight:bold; color:indigo"/>
<span id="SDATE" class="text-danger"></span>
Intership Till: <input type="date" id="edate" value="2018-09-26" min="2018-09-26" max = "2019-01-01" style="font-weight:bold; color:indigo"/>
<span id="EDATE" class="text-danger"></span>
</p>
<br>
<p>
SKILLS YOU HAVE :
<br><br>
<textarea id="skills" rows="2" cols="80" placeholder="Like c++, java, python, javascript......." autocomplete="off" style="font-weight:bold; color:indigo"></textarea>
<span id="SkillsE" class="text-danger"></span>
</p>
<br>
<p>
LANGUAGES :
<br><br>
<textarea id="languages" rows="2" cols="80" placeholder="Hindi, English, Spanish, Marathi ......." autocomplete="off" style="font-weight:bold; color:indigo"></textarea>
<span id="LanguagesE" class="text-danger"></span>
</p>
<br>
<p style="text-align: right;">
Date of Application: <input type="date" id="formdate" min="2018-09-26" style="font-weight:bold; color:indigo"/>
</p>
<br><br>
<p>
<input type="submit" name="submit" value="SUBMIT" class="btn btn-success" style="padding: 20px; font-size: 28px;" />
<input type="reset" name="reset" value="RESET" class="btn btn-primary" style="padding: 20px; font-size: 28px;" />
</p>
</form>
<br><br><br><br><br><br>
</div>
</div>
</body>
What I have tried:
What I have tried:
I done all the validation, and when i was doing step by step validation and cheking then it was working fine but it is not working now after the code is complete?推荐答案
这篇关于在完成所有javascript验证后，我的表单无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！