Formular in JSP mit Jquery validieren

Ich versuche zu überprüfen, dass alle Felder eingegeben haben, bevor es übermittelt wird. Ich habe das folgende Skript, um dies zu versuchen, aber es funktioniert nicht. Ich bin nicht sicher, ob dies der beste Weg ist, dies auch zu tun.Formular in JSP mit Jquery validieren

hier ist die jsp:

<%@ page language="java" contentType="text/html; charset=utf-8" 
    pageEncoding="utf-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script 
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<!-- <script src="resources/js/additionFormScript.js"></script> --> 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf"%> 
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%> 
<link rel="stylesheet" type="text/css" href="resources/css/styles.css"> 
<link rel="stylesheet" 
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Employees</title> 

</head> 
<body> 

    <br> 

    <div class="container"> 
     <h3>Persons List</h3> 
     <table class="table table-hover table-striped"> 
      <tr> 
       <th>User Name</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Phone Number</th> 
       <th>Role</th> 
       <th>Edit</th> 
       <th>Delete</th> 
      </tr> 
      <c:forEach items="${listPersons}" var="employee"> 
       <tr> 
        <td>${employee.userName}</td> 
        <td>${employee.firstName}</td> 
        <td>${employee.lastName}</td> 
        <td>${employee.phoneNumber}</td> 
        <td>${employee.role}</td> 
        <td><a href="<c:url value='/edit/${employee}' />">Edit</a></td> 
        <td><a href="<c:url value='/remove/${employee}' />">Delete</a></td> 
       </tr> 
      </c:forEach> 
     </table> 
    </div> 

    <!--       addition form         --> 
    <div class="container" id="addition-form"> 
     <h2>Create Employee</h2> 

     <%-- <sf:form method="post" class="form-horizontal" 
      action="persistEmployee" modelAttribute="employee"> --%> 

     <sf:form method="post" class="form-horizontal" 
      modelAttribute="employee" id="additionForm"> 

      <div class="form-group"> 
       <sf:label class="control-label col-sm-2" for="username" 
        path="userName">User Name:</sf:label> 
       <div class="col-sm-10"> 
        <sf:input class="form-control" id="username" path="userName" /> 
       </div> 
      </div> 

      <div class="form-group"> 
       <sf:label class="control-label col-sm-2" for="fname" 
        path="firstName">First Name:</sf:label> 
       <div class="col-sm-10"> 
        <sf:input class="form-control" id="fname" path="firstName" /> 
       </div> 
      </div> 

      <div class="form-group"> 
       <sf:label class="control-label col-sm-2" for="lname" path="lastName">Last Name:</sf:label> 
       <div class="col-sm-10"> 
        <sf:input class="form-control" id="lname" path="lastName" /> 
       </div> 
      </div> 

      <div class="form-group"> 
       <sf:label class="control-label col-sm-2" for="pnumber" 
        path="phoneNumber">Phone Number</sf:label> 
       <div class="col-sm-10"> 
        <sf:input class="form-control" id="pnumber" path="phoneNumber" /> 
       </div> 
      </div> 


      <div class="form-group"> 
       <sf:label class="control-label col-sm-2" for="role" path="role">Role</sf:label> 
       <div class="col-sm-10"> 
        <sf:select path="role" multiple="multiple" class="form-control" 
         id="sel1"> 
         <sf:option value="CONSULTANT"></sf:option> 
         <sf:option value="MANAGER"></sf:option> 
         <sf:option value="ADMIN"></sf:option> 
        </sf:select> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </div> 
      </div> 

     </sf:form> 
    </div> 
    <!--       end addition form         --> 

    <div class="container"> 
     <button type="button" class="btn btn-primary" id="add-button">+</button> 
    </div> 

</body> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#add-button").click(function() { 
      $("#addition-form").fadeIn("slow"); 
     }); 
    }); 
</script> 


<script> 
    var formIsComplete = function() { 
     $(":text, select").each(function() { 
      if ($(this).val() === "") 
       return false; 
     }); 
     return true; 
    } 

    $(document).ready(function() { 
     $("#addition-form").submit(function() { 
      if (formIsComplete) { 
       $("#addition-form").fadeOut("slow"); 
       alert("UserAdded"); 
      } else { 
       alert("Empty Fields!!"); 
      } 
     }); 
    }); 
</script> 


</html>

Quelle

2016-09-15 Ammar Samater

Also habe ich diesen Ansatz zugunsten Jquery Validator aufgegeben. Ich bin mir aber nicht sicher, ob es in meinem Fall passt, da ich Spring-Tags verwende. –

versuchen Ihre Variable zu ändern, wie unten zu funktionieren, können Sie vielleicht

function formIsComplete() { 
    var isFormComplete=true; 
    isFormComplete=$(":text, select").each(function() { 
     if ($(this).val() === "") 
      return false; 
    }); 
    return isFormComplete; 
}

i ein in jsp der besten Validierung denken helfen zu jQuery verwendet wird

Quelle

2016-09-15 17:35:40

Ich sehe weiterhin die Meldung "Benutzer hinzugefügt", unabhängig davon, ob die Felder ausgefüllt oder leer sind. –

Wenn Sie wissen möchten, Felder sind abgelegt oder leer, ich empfehle, console.log() anstelle von Alert verwenden. Alarm in einer Situation zeigen keinen echten Wert oder funktioniert nicht. In der Konsole Ihres Browsers sehen Sie den Wert. –

Formular in JSP mit Jquery validieren

Antwort

Verwandte Themen