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

我需要验证员工的每个字段并显示其详细信息。如果单击提交按钮，验证应该在成功验证后发生，我应该隐藏细节 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="[email protected]"/><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; 

}

我应该如何验证各f取决于它们的值，并且隐藏细节div并启用显示div。

在此先感谢。

来源

2016-11-28 Mahi

首先，您可以使用文本框的'required'属性来检查文本框字段是否为空。

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

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

来源

2016-11-28 08:25:28 MarkiE

你能告诉我如何在点击提交按钮后验证成功时隐藏** details div **。然后可见**显示div **并打印它们的值。 – Mahi

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

回答

相关问题