Spring Boot：使用@Path变量时JQuery验证不起作用
[英]Spring boot : JQuery validation not working when @Path Variable is used
问题描述
I am new to Spring boot and trying to work my way through my first Spring boot app. 
我是Spring Boot的新手，正在尝试通过我的第一个Spring Boot应用程序工作。 I am using Spring Tool Suite as my IDE. 我正在使用Spring Tool Suite作为我的IDE。
In the app im creating, the user should be able to edit a specific record after viewing it. 在创建应用程序中，用户应能够在查看特定记录后对其进行编辑。 im using path variable annotation to get the ID from the jsp that im viewing the record to the jsp im using to edit the record. 我使用路径变量注释从查看记录的jsp到用于编辑记录的jsp的ID获取ID。 I have used JQuery for front end validation and i have noted that the JQuery validation works everywhere except in the places i have used path variable. 我已经使用JQuery进行前端验证，并且我注意到，除了在我使用path变量的地方，JQuery验证在任何地方都有效。
I have searched everywhere to find a solution, but can't seem to find any that successfully addresses this. 我到处搜索以找到解决方案，但似乎找不到成功解决此问题的方法。
Here is my Controller 这是我的控制器
`package com.example.demo.controller;
import java.util.List;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.MailException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import com.example.demo.dao.FaultDao;
import com.example.demo.dao.Technician_faultDao;
import com.example.demo.model.Fault;
//import com.example.demo.model.Technicianfault;
import com.example.demo.model.Technicianfault;
@Controller
public class FaultController {
@Autowired
public FaultDao faultdao;
@RequestMapping(value="/detail",method=RequestMethod.GET)
public ModelAndView view(){
List<Fault> list=faultdao.getAllFaults();
return new ModelAndView("viewdetails.jsp","list",list);
}
@RequestMapping("editfault")
public String editform() {
return "editfault.jsp";
}
@RequestMapping(value="/editfault/{faultid}",method=RequestMethod.GET)
public String edit(@PathVariable int faultid, ModelMap model) {
Fault fault= faultdao.getFaultById(faultid);
model.addAttribute("edfault", fault);
return "/editfault";
}
/* It updates record for the given id in editfault page and redirects to /detail */
@RequestMapping(value="/editsave",method = RequestMethod.POST)
public ModelAndView editsave(@Valid @ModelAttribute("edfault") Fault fau,BindingResult result, Model model){
System.out.println("id is"+fau.getId());
//if ( result.hasErrors()) {
//return new ModelAndView("form");
//}
faultdao.update(fau);
return new ModelAndView("redirect:/detail");
} `
FaultDao.java FaultDao.java
package com.example.demo.dao;
import java.sql.Connection;
import java.sql.Date;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.ResultSetExtractor;
import org.springframework.mail.MailException;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;
import com.example.demo.model.Fault;
import com.example.demo.model.Technicianfault;
@Service
public class FaultDao {
JdbcTemplate template;
private JavaMailSender mailsender;
@Autowired
public void setTemplate(JdbcTemplate template, JavaMailSender mailsender ) {
this.template = template;
this.mailsender=mailsender;
}
@Autowired
public void setDataSource(DataSource datasource) {
template= new JdbcTemplate(datasource);
}
public Fault getFaultById(int id) {
// TODO Auto-generated method stub
return template.query("select * from fault where jobID="+id+"",new ResultSetExtractor<Fault>(){
public Fault extractData(ResultSet rs) throws SQLException,
DataAccessException {
Fault e=new Fault();
while(rs.next()){
e.setId(rs.getInt(1));
e.setNature(rs.getString(2));
e.setPriority(rs.getString(3));
e.setStatus(rs.getString(4));
e.setCategory(rs.getString(5));
e.setCliID(rs.getInt(6));
e.setBrID(rs.getInt(7));
e.setDescrip(rs.getString(8));
e.setReportedBy(rs.getString(9));
e.setFixedBy(rs.getDate(10));
e.setReportedOn(rs.getDate(11));
e.setIsassigned(rs.getBoolean(12));
}
return e;
}
});
}
public void update(Fault p) {
String sql="update fault set nature='"+p.getNature()+"',priority='"+p.getPriority()+"',status='"+p.getStatus()+"',category='"+p.getCategory()+"',cID='"+p.getCliID()+"',brID='"+p.getBrID()+"',descrip='"+p.getDescrip()+"' ,reportedBy='"+p.getReportedBy()+"', fixedby='"+p.getFixedBy()+"',reportedDate='"+p.getReportedOn()+"' where jobID="+p.getId()+"";
System.out.println(sql);
template.update(sql);
}
EditFault.jsp EditFault.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix = "c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page isELIgnored = "false" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/custom.css">
<script src="js/jquery.js"></script>
<script src="js/proper.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script src="js/jquery.datetimepicker.full.js"></script>
<title>Edit Fault Details</title>
</head>
<body>
<form:form method="POST" modelAttribute="edfault" id="validateEdForm" class="form-horizontal" action="/editsave">
<div class="form-group row" style="margin-left: 30%;margin-top: 4%">
<label class="control-label col-sm-2" for="id">Job ID</label>
<div class="col-sm-4">
F${edfault.id}
<form:input type="hidden" path="id" class="form-control" id="id" name="id"/>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 4%">
<label class="control-label col-sm-2" for="nature">Nature</label>
<div class="col-sm-4">
<form:input type="text" path="nature" class="form-control" id="nature" name="nature"/>
<div class = "has-error">
<form:errors path="nature" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="category">Category</label>
<div class="col-sm-4">
<select style="width: 280px; height: 35px;padding: 8px" id="category" path="category" name="category">
<option value="${edfault.category}">${edfault.category}</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Firewall">Firewall</option>
</select>
<div class = "has-error">
<form:errors path="category" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="priority">Priority :</label>
<div class="col-sm-4">
<select style="width: 280px; height: 35px;padding: 8px" id="priority" path="priority" name="priority">
<option value="${edfault.priority}">${edfault.priority}</option>
<option value="Urgent">Urgent</option>
<option value="Not Urgent">Not Urgent</option>
</select>
<div class = "has-error">
<form:errors path="priority" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="cliID">Client Name :</label>
<div class="col-sm-4">
<select style="width: 280px; height: 35px;padding: 8px" id="cliID" path="cliID" name="cliID">
<option value="${edfault.cliID}">${edfault.cliID}</option>
<%
try{
String sql = "select clientID, name from client";
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/automatedbarcode_database?useSSL=false", "root", "root");
Statement stm = con.createStatement();
ResultSet rs = stm.executeQuery(sql);
while (rs.next()){
%>
<option value="<%= rs.getInt("clientID")%>"> <%= rs.getString("name") %></option>
<%
}
}
catch(Exception e){
e.printStackTrace();
out.println("Error : " + e.getMessage());
}
%>
</select>
<div class = "has-error">
<form:errors path="cliID" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="brID">Branch Name :</label>
<div class="col-sm-4">
<select style="width: 280px; height: 35px;padding: 8px" id="brID" path="brID" name="brID">
<option value="${edfault.brID}">${edfault.brID}</option>
<%
try{
String sql = "select branchID, Bcity from branch";
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/automatedbarcode_database?useSSL=false", "root", "root");
Statement stm = con.createStatement();
ResultSet rs = stm.executeQuery(sql);
while (rs.next()){
%>
<option value="<%= rs.getInt("branchID")%>"> <%= rs.getString("Bcity") %></option>
<%
}
}
catch(Exception e){
e.printStackTrace();
out.println("Error : " + e.getMessage());
}
%>
</select>
<div class = "has-error">
<form:errors path="brID" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="descrip">Description :</label>
<div class="col-sm-4">
<form:input type="text" path="descrip" class="form-control" id="descrip" name="descrip"/>
<div class = "has-error">
<form:errors path="descrip" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="reportedBy">Reported By :</label>
<div class="col-sm-4">
<form:input type="text" path="reportedBy" class="form-control" id="reportedBy" name="reportedBy"/>
<div class = "has-error">
<form:errors path="reportedBy" class="help-inline"/>
</div>
</div>
</div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="fixedBy">Fixed By : </label>
<div class="col-sm-4">
<form:input type="date" path="fixedBy" class="form-control" id="fixedBy" name="fixedBy"/>
<div class = "has-error">
<form:errors path="fixedBy" class="help-inline"/>
</div>
</div></div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="reportedOn">Reported On : </label>
<div class="col-sm-4">
<form:input type="date" path="reportedOn" class="form-control" id="reportedOn" name="reportedOn"/>
<div class = "has-error">
<form:errors path="reportedOn" class="help-inline"/>
</div>
</div></div>
<div class="form-group row" style="margin-left: 30%;margin-top: 2%">
<label class="control-label col-sm-2" for="status">Status</label>
<div class="col-sm-4">
<select style="width: 280px; height: 35px;padding: 8px" id="status" path="status" name="status">
<option value="${edfault.status}">${edfault.status}</option>
<option value="Pending">Pending</option>
<option value="Completed">Completed</option>
</select>
<div class = "has-error">
<form:errors path="status" class="help-inline"/>
</div>
</div>
</div>
<br><br><br><br>
<div class="form-group" style="margin-left: 42%;margin-top: 2%">
<div class="col-sm-offset-2 col-sm-10">
<div class="form-actions">
<button type="submit" value = "edit" class="btn btn-primary">Edit</button>
<button type="reset" value="reset" class="btn btn-warning">Reset</button>
</div>
</div>
</div>
</form:form>
</div>
<script type="text/javascript">
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
//alert(maxDate);
$('#reportedOn').attr('max', maxDate);
});
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var minDate = year + '-' + month + '-' + day;
//alert(maxDate);
$('#fixedBy').attr('min', minDate);
});
$(document).ready(function() {
$('#validateEdForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
nature: {
validators: {
stringLength: {
min: 5,
message: 'Enter nature of fault reported with minimum of 5 letters length'
},
notEmpty: {
message: 'Nature field is required'
}
}
},
category: {
validators: {
notEmpty: {
message: 'Category field is required'
}
}
},
priority: {
validators: {
notEmpty: {
message: 'Priority field is required'
}
}
},
cliID: {
validators: {
notEmpty: {
message: 'Client Name field is required'
}
}
},
brID: {
validators: {
notEmpty: {
message: 'Branch Name field is required'
}
}
},
descrip: {
validators: {
stringLength: {
min: 10,
message: 'Description should be at least 10 letters long'
},
notEmpty: {
message: 'Description field is required'
},
regexp:{
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'Description can only have letters, numbers, dots and underscores'
}
}
},
reportedBy: {
validators: {
stringLength: {
min: 5,
message: 'Name of the person reporting on behalf of client should be at least 5 letters long'
},
notEmpty: {
message: 'Reported By field is required'
}
}
},
fixedBy: {
validators: {
notEmpty: {
message: 'Fixed By field is required'
}
}
},
reportedOn: {
validators: {
notEmpty: {
message: 'Reported on field is required'
}
}
},
status: {
validators: {
notEmpty: {
message: 'Status field is required'
}
}
},
}
});
});
</script>
</body>
And here is my POM.xml 这是我的POM.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>Project</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>Project</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-jasper</artifactId>
<version>8.5.31</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-mail -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
<version>2.0.5.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.0.1.Final</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
The Jquery validation was working perfectly fine before i used @Path variable to get the id from the URI. 在使用@Path变量从URI获取ID之前，Jquery验证工作得非常好。 Please help me! 请帮我！ Thanks a lot in advance! 在此先多谢！
1 个解决方案
解决方案1
0 2018-09-17 15:46:34
Found the solution. 找到了解决方案。 You just need to add / in front of the script src paths in the jsp. 您只需要在jsp中的脚本src路径前面添加/。
<script src="/js/jquery.js"></script>
<script src="/js/proper.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrapValidator.js"></script>
<script src="/js/jquery.datetimepicker.full.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
从 angular 传递时，spring boot 无法识别路径变量数据 - Path variable data is not recognized by spring boot when passed from angular
Spring Boot + React 中路径变量的问题 - Problems with path variable in Spring Boot + React
Jquery表单验证不起作用，没有使用插件 - Jquery form validation not working no plugin used
在通过AJAX包含另一个页面的页面上使用时，JQuery验证插件不起作用 - JQuery Validation Plugin not working when used on page that includes another page via AJAX
Spring 引导 Controller 不将路径变量识别为可选 - Spring Boot Controller does not recognize Path Variable as optional
jQuery与变量一起使用时不添加类 - JQuery not adding class when used with a variable
使用Jquery时Bootstrap验证不起作用 - Bootstrap Validation Not Working when using Jquery
输入字段为空时，jQuery验证不起作用 - jQuery validation not working when input fields are empty
使用jQuery函数时，Textchange事件不起作用 - Textchange event not working when jquery function is used
在jQuery对象上使用innerHTML时无法正常工作 - innerHTML not working properly when used on a jQuery object
相关标签