Question

我需要验证员工的每个领域并显示他们的详细信息。如果单击“提交”按钮，验证应在成功验证后进行，我应隐藏详细信息 div元素，然后在详细信息 div中显示员工详细信息。

HTML：

<html>  
<head>
<title>Employee Details</title>
<h2>Employee Details</h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript" src="sampleJs.js"></script>  
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>  
<body>  
<div>
<div id="details"><br/>
Full Name :  <input type="text" name="name" id="idName" /><br/><br/>
Address 1 :  <input type="text" name="name" id="idAddress1"/><br/><br/>
Address 2 :  <input type="text" name="name" id="idAddress2"/><br/><br/>
Street :  <input type="text" name="name" id="idStreet"/><br/><br/>
City :  <input type="text" name="name" id="idCity"/><br/><br/>
State :  <select id="idState">
  <option value="s1">TamilNadu</option>
  <option value="s2">Kerala</option>
    <option value="s3">Karnataka</option>
      <option value="s4">Delhi</option>

</select><br/><br/>
Zip code :  <input type="text" name="name" id="idZipcode"/><br/><br/>
Email ID :  <input type="email" name="name" id="idEmail" placeholder="me@example.com"/><br/><br/>
Qualification :  <input type="text" name="name" id="idQualification"/><br/><br/>
Previous Experiance :  <input type="number" name="name" id="idPrevExp1" placeholder="months"/> <input type="number" name="name" id="idPrevExp2" placeholder="years"/>
<br/><br/>
Designation : <input type="text" name="designation" id="idDesignation"/><br/><br/>
Team Name : <input type="text" name="teamname" id="idTeamName"/><br/><br/>
Module Name : <input type="text" name="modulename" id="idModuleName"/><br/><br/>

<input type="button" value="Submit" onclick="display()"/>  
</div>


<div id="display"></div>
</div>
<a href="http://www.skava.com/">Go to Skava website</a>
</body>  
</html>

CSS：

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}
a {
    float: right;
}

JS：

function display(){  
    var eName = document.getElementById('idName').value; 
    var address1 = document.getElementById('idAddress1').value; 
    var address2 = document.getElementById('idAddress2').value; 
    var street = document.getElementById('idStreet').value; 
    var city = document.getElementById('idCity').value; 
    var state = document.getElementById('idState').value; 
    var zipCode = document.getElementById('idZipcode').value; 
    var qualification = document.getElementById('idQualification').value; 
    var prevExp1 = document.getElementById('idPrevExp1').value; 
    var prevExp2 = document.getElementById('idPrevExp2').value; 
    var designation = document.getElementById('idDesignation').value; 
    var tName = document.getElementById('idTeamName').value; 
    var mName = document.getElementById('idModuleName').value; 
     if(eName =="" ){
             alert("Name field missing"); 
                  return false;
     }

         if( address1 ==""){
        alert(" Address 1 field missing");                return false;

} 

 if(street  ==""){
alert(" Street field missing");               return false;
} 

     if(city  =="") {
    alert(" City field missing");                 return false;
}

 if(state  ==""){
alert("State field missing");                 return false;
}

     if(zipCode  ==""){
    alert("Zipcode field missing");               return false;
 }

     if(qualification  ==""){
    alert("Qualification field missing");                 return false;
}

 if(prevExp1  =="") {
alert("Previous Experiance months field missing");                return false;
} 

 if (prevExp2  =="") {
alert("Previous Experiance years field missing");                 return false;
}

     if(designation  ==""){
    alert("Designation field missing");               return false;
 }

     if(tName  =="") {
        alert("Team name field missing");                 return false;

    }


        if(mName  =="") {
        alert("Module field missing");                return false;
 }


 if( zipCode == ""|| isNaN( zipCode ) || zipCode.length != 6 )
         {
            alert( "Please provide a zip in the format ######" );
         return false;
         }
        // var div = document.getElementById('details');
       //  div.style.display = 'none';
        $("#details").addClass("disabledDiv");

      var div = document.getElementById('display');

      div.innerHTML = div.innerHTML +" <br/>" +"Employee Name :  " + eName +"<br/> Address "+ address1 +"<br/> "+ address2 +
  " <br/> Street :"+ street +" <br/>City :" + city +" <br/> State :" +state +" <br/> ZipCode :" + zipCode+ "<br/> Qualification :" + qualification+ "<br/> Experiance : " +prevExp2 +" years "+prevExp1+" months"
  + "<br/> Designation : " + designation + "<br/> Team Name :" + tName + "<br/> Module Name :" + mName;

}

我应该如何验证每个字段取决于它们的值？隐藏详细信息div并启用显示div。

提前致谢。

Answer 1

首先，您可以使用＆＃39; required＆＃39;文本框的属性，用于检查文本框字段是否为空。

<input type="text" name="name" id="idName" required="required" />

对于验证摘要和其他验证，您可以使用http://parsleyjs.org javascript库。

表单验证并显示其详细信息

1 个答案: