【发布时间】：2018-08-21 17:39:09
【问题描述】：
我正在尝试使用 jquery.validate.js 验证我的表单，这是我在 xhtml 文件中的链接
<h:head>
<script src="resources/jquery-3.3.1.js" type="text/javascript"></script>
<script src="resources/jquery.validate.js" type="text/javascript">
</script>
</h:head>
这是我要验证的输入文本：
<h:inputText value="#{acct.username}" id ="usernames"></h:inputText>
我希望这也是必需的，并且最小长度为 3
我在同一个 xhtml 文件中的 java 脚本中有这个
$(document).ready(function(){
$('reg-form').validate({
rules:{
usernames:{
required: true,
minlength: 3
},
surname:{
minlength: 3
},
password:{
minlength: 3
}
}
}
);
});
我似乎也无法从 validate.js 中获得至少三个字母需要或需要的任何消息，我是否链接了错误？
这是整个 xhtml 文件：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<style>
.ferra{
background-image:url("resources/b1.jpg");
}
</style>
<title>Hi and welcome </title>
<h:outputStylesheet name="style.css" />
<script src="resources/jquery-3.3.1.js" type="text/javascript"></script>
<script src="resources/jquery.validate.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link> <!-- CSS som jag valt att använda -->
</h:head>
<h:body styleClass="ferra"> <!-- bilden b1 ska vara background för hela body -->
<ul class="nav">
<input type="text" name="search" placeholder="Search.."> </input> <!-- Ingen funktionalitet -->
<li><a href="#">Log in</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">About</a></li>
<h:form> <!-- Internationalization -->
<h:panelGrid columns="2">
Language :
<h:selectOneMenu value="#{userData.locale}" onchange="submit()"
valueChangeListener="#{userData.localeChanged}"> <!-- anropar funktionen -->
<f:selectItems value="#{userData.countries}" /> <!-- väljer land utifrån-->
</h:selectOneMenu>
</h:panelGrid>
</h:form>
</ul>
<h:outputLabel value="#{acct.init()}"/>
<h:form>
<h3>Log in</h3>
<p>
<h:outputText value="#{msg['username']}" />
<h:inputText id ="username" value="#{acct.username}"/>
<h:outputText value="#{msg['password']}" />
<h:inputSecret id ="password" value="#{acct.password}"/>
</p>
<p>
<h:commandButton value ="Log in" action ="#{acct.login()}"/>
</p>
<hr/>
</h:form>
<h:form>
<h3><h:outputText value="#{msg['greeting']}" /></h3>
</h:form>
<h:form id="reg-form">
<h3><h:outputText value="#{msg['newAccount']}"/></h3>
<h:panelGrid columns="1">
<h:outputText value="#{msg['username']}" />
<h:inputText value="#{acct.username}" id ="usernames"></h:inputText>
<p class="userValidation"> Three Charectors required!</p>
<h:message for="username" errorStyle="color:red; display:block"/>
<h:outputText value="#{msg['password']}" />
<h:inputSecret id ="password" value="#{acct.password}" required="true" requiredMessage="Please enter password">
</h:inputSecret>
<h:message for="password" errorStyle="color:red; display:block"/>
<h:outputText value="#{msg['name']}" />
<h:inputText id ="name" value="#{acct.name}" required="true" requiredMessage="Please enter name" >
</h:inputText>
<h:message for="name" errorStyle="color:red; display:block"/>
<h:outputText value="#{msg['surname']}" />
<h:inputText id ="surname" value="#{acct.surname}" required="true" requiredMessage="Please enter sirname">
</h:inputText>
<h:message for="surname" errorStyle="color:red; display:block"/>
<h:outputText value="#{msg['ssn']}" />
<h:inputText id ="ssn" value="#{acct.ssn}" required="true" requiredMessage="Please enter ssn">
</h:inputText>
<p class="ssnerror" id="ssnerrorjs"> Needs sex digits!</p>
<h:message for="ssn" errorStyle="color:red; display:block"/>
<h:outputText value="#{msg['email']}" />
<h:inputText id ="email" value="#{acct.email}" required="true" requiredMessage="Please enter email">
</h:inputText>
<h:message for="email" errorStyle="color:red; display:block"/>
</h:panelGrid>
<p>
<h:commandButton value ="new Account" id= "submit-button" action ="#{acct.newAccount()}"/>
</p>
<p>
<h:outputText id="res" value="#{acct.result}"/>
</p>
</h:form>
<script type="text/javascript">
/* $(document).ready(function(){
$('#reg-form').on('input', function(){
var ssn = document.getElementById('reg-form:ssn').value;
if(ssn.length().toString() > 6 ){
$('#ssnerror').hide();
}else{
$('#ssnerror').show();
}
});
});*/
$(document).ready(function(){
$('reg-form').validate({
rules:{
usernames:{
required: true,
minlength: 3
},
surname:{
minlength: 3
},
password:{
minlength: 3
}
}
}
);
});
</script>
</h:body>
</html>
【问题讨论】：
-
客户端输入的 id 不是您认为的那样（假设您在 jquery 验证规则中使用 'id's'。
-
请参考您正在使用的jQuery插件。如果它使用 ID，那么 Kukeltje 是对的。
-
是的，谢谢，我也会查看它，在另一个说明中，我忘记在 $('reg-form').validate 中也放入了 #，当我也更改了它时 $(#'reg -form') 验证似乎有效 :) ！ @j
-
这不是重复的.. 至少不是现在标记为重复的问题。
标签： javascript jquery validation jsf xhtml