javascript проверка в JSP - PullRequest
Новая
       15

javascript проверка в JSP

1 голос
/ 29 марта 2020

это мой jsp код. Я хочу отправить форму на сервер только после проверки на стороне клиента. Форма отправляется на указанную действие страницу при отправке, однако сначала она должна validate(). Я не вижу, что я делаю не так. 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/eoms.css" >
        <title>Registration</title>
        <script> 
function validate()                              
{ 
        var id = document.forms["RegForm"]["sID"];
    var name = document.forms["RegForm"]["name"];            
    var des = document.forms["RegForm"]["des"]; 
    var dept = document.forms["RegForm"]["depi"]; 
    var pass = document.forms["RegForm"]["epw"]; 
    var password = document.forms["RegForm"]["empw"];  

    if (id.value === "")                                 
    { 
        window.alert("Please enter your ID."); 
        id.focus(); 
        return false; 
    } 

    if (name.value === "")                           
    { 
        window.alert("Please enter your name"); 
        name.focus(); 
        return false; 
    } 

    if (des.value === "")                                
    { 
        window.alert("Please enter your designation"); 
        des.focus(); 
        return false; 
    } 

    if (dept.value === "")                       
    { 
        window.alert("Please enter your department."); 
        phone.focus(); 
        return false; 
    } 

    if (pass.value !== password.value)                   
    { 
        window.alert("Passwords must match."); 
        password.focus(); 
        return false; 
    } 

    if (pass.value === "")               
    { 
        alert("Please enter your password."); 
        pass.focus(); 
        return false; 
    } 

    return true; 
}
</script>
    </head>
    <body>
        <div id="header">
            <h3>
        Employee<br>
        Order<br>
        Management<br>
        System
            </h3>
    </div>
        <div id="form" style="width: 30%; display: block; margin-left: 35%; margin-right: 35%; " >
            <div style="text-align: center; background-color: #1E88E5; color: #BBDEFB; padding: 8px;">
                Are you an employee?<br>
                Register Here<br>
            </div>
                    <div id="space">
                        <p>*All fields are required</p>
          <%
                                try{
                                    String regerror = session.getAttribute("regerror").toString();
                                    out.println(regerror);
                                    session.removeAttribute("regerror");
                                }
                                catch(Exception e){

                                }
                                %>
                    </div>
                    <br>
                        <table id="reg">
                            <form name="RegForm" action="addEmp.jsp" onsubmit="return validate()" method="post">
                                        <tr>
                        <td>
                            Employee ID:
                        </td>
                        <td><input type="text" placeholder="Enter your ID" name="eID"></td>
                    </tr>
                    <tr>
                        <td>Employee Name:</td>
                        <td><input type="text" placeholder="Enter your Name" name="name"></td>
                    </tr>
                    <tr>
                        <td>
                            Designation
                        </td>
                        <td><input type="text" placeholder="Enter your designation" name="des"></td>
                    </tr>
                    <tr>
                        <td>
                            Department:
                        </td>
                        <td><input type="text" placeholder="Enter your department" name="dept"></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" placeholder="Enter your password" name="epw"></td>
                    </tr>
                    <tr>
                        <td>Retype Password:</td>
                        <td><input type="password" placeholder="Re-type your password" name="empw"></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center;"><input type="submit" name="submit" value="Register"></td>
                    </tr>
                                </form>
                                        <tr>
                                            <td colspan="2" style="text-align:center;">Already a member? <a style="color: #424242;" href="login.jsp">Login</a></td>
                    </tr>
            </table>
        </div>
    </body>
</html>

Извините за неправильный отступ. Спасибо ...

Ответы [ 2 ]

0 голосов
/ 30 марта 2020 
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
     <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/eoms.css" >
        <title>Registration</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
      </script>

           <script> 
                $(document).ready(function (){
                    $("form").submit(function (){
                        var id = $("#eid").val();
                        var employname = $("#ename").val();
                        var designation = $("#desi").val();
                        var department = $("#dep").val();
                        var password = $("#password").val();
                        var passmact = $("#passm").val();

                        if(id===''){
                            alert("Please enter id");
                            id.focus();
                            return false;
                        }
                        if(employname ===''){
                            alert("Please enter employname");
                            return false;
                        }
                        if(designation===''){
                           alert("Please enter desinatin");
                            return false;
                        }
                        if(department ===''){
                            alert("Please enter despa");
                            return false;
                        }
                        if(password===''){
                              alert("Please enter pass");
                            return false;
                        }
                        if(password!==passmact){
                             alert("Password not match");
                            return false;
                        }
                          return true;

                    });

                });
        </script>

      </head>
    <body>
        <div id="header">
            <h3>
        Employee<br>
        Order<br>
        Management<br>
        System
            </h3>
      </div>
        <div id="form" style="width: 30%; display: block; margin-left: 35%; margin-right: 
  35%; " >
            <div style="text-align: center; background-color: #1E88E5; color: #BBDEFB; 
       padding: 8px;">
                Are you an employee?<br>
                Register Here<br>
            </div>
                    <div id="space">
                        <p>*All fields are required</p>
          <%
                                try{
                                    String regerror = 
    session.getAttribute("regerror").toString();
                                    out.println(regerror);
                                    session.removeAttribute("regerror");
                                }
                                catch(Exception e){

                                }
                                %>
                    </div>
                    <br>
<!--                    <p id="error"></p>-->
                        <table id="reg">

                            <form name="RegForm" action="addEmp.jsp"  method="post">
                                        <tr>
                        <td>
                            Employee ID:
                        </td>
                        <td><input type="text" id="eid" placeholder="Enter your ID" 
    name="eID"></td>
                                        <p id="errorid"></p>
                    </tr>
                    <tr>
                        <td>Employee Name:</td>
                        <td><input type="text" id="ename" placeholder="Enter your Name" 
   name="name"></td>
                    <p id="erroremploy"></p>
                    </tr>
                    <tr>
                        <td>
                            Designation
                        </td>
                        <td><input type="text" id="desi" placeholder="Enter your 
    designation" name="des"></td>
                    <p id="errordes"></p>
                    </tr>
                    <tr>
                        <td>
                            Department:
                        </td>
                        <td><input type="text" id="dep" placeholder="Enter your 
    department" name="dept"></td>
                    <p id="errordep"></p>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" id="password" placeholder="Enter your 
    password" name="epw"></td>
                    <p id="errorpass"></p>
                    </tr>
                    <tr>
                        <td>Retype Password:</td>
                        <td><input type="password" id="passm" placeholder="Re-type your 
    password" name="empw"></td>
                    <p id="errorpmatch"></p>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center;"><input id="btns" 
    type="submit" name="submit" value="Register"></td>
                    </tr>
                                </form>
                                        <tr>
                                            <td colspan="2" style="text- 
    align:center;">Already a member? <a style="color: #424242;" href="login.jsp">Login</a> 
    </td>
                    </tr>
            </table>
        </div>
    </body>
    </html>
0 голосов
/ 29 марта 2020

Ваш код js отправляется в вашу функцию, но не показывает никаких ошибок, потому что в вашем коде js есть какое-то поле, которое у вас пропущено, т.е. не было ввода с именем sID это eID, также для depi должно быть dept. Рабочий код: 

function validate() {
  var id = document.forms["RegForm"]["eID"];
  var name = document.forms["RegForm"]["name"];
  var des = document.forms["RegForm"]["des"];
  var dept = document.forms["RegForm"]["dept"];
  var pass = document.forms["RegForm"]["epw"];
  var password = document.forms["RegForm"]["empw"];

  if (id.value === "") {
    window.alert("Please enter your ID.");
    id.focus();
    return false;
  }

  if (name.value === "") {
    window.alert("Please enter your name");
    name.focus();
    return false;
  }

  if (des.value === "") {
    window.alert("Please enter your designation");
    des.focus();
    return false;
  }

  if (dept.value === "") {
    window.alert("Please enter your department.");
    dept.focus();
    return false;
  }

  if (pass.value !== password.value) {
    window.alert("Passwords must match.");
    password.focus();
    return false;
  }

  if (pass.value === "") {
    alert("Please enter your password.");
    pass.focus();
    return false;
  }

  return true;
}
<div style="text-align: center; background-color: #1E88E5; color: #BBDEFB; padding: 8px;">
  Are you an employee?<br> Register Here<br>
</div>
<div id="space">
  <p>*All fields are required</p>
</div>
<br>
<table id="reg">
  <form name="RegForm" action="addEmp.jsp" onsubmit="return validate()" method="post">
    <tr>
      <td>
        Employee ID:
      </td>
      <td><input type="text" placeholder="Enter your ID" name="eID"></td>
    </tr>
    <tr>
      <td>Employee Name:</td>
      <td><input type="text" placeholder="Enter your Name" name="name"></td>
    </tr>
    <tr>
      <td>
        Designation
      </td>
      <td><input type="text" placeholder="Enter your designation" name="des"></td>
    </tr>
    <tr>
      <td>
        Department:
      </td>
      <td><input type="text" placeholder="Enter your department" name="dept"></td>
    </tr>
    <tr>
      <td>Password:</td>
      <td><input type="password" placeholder="Enter your password" name="epw"></td>
    </tr>
    <tr>
      <td>Retype Password:</td>
      <td><input type="password" placeholder="Re-type your password" name="empw"></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align:center;"><input type="submit" name="submit" value="Register"></td>
    </tr>
  </form>
  <tr>
    <td colspan="2" style="text-align:center;">Already a member? <a style="color: #424242;" href="login.jsp">Login</a></td>
  </tr>
</table>
...