提问人：EliiTryToLearn 提问时间：3/13/2018 更新时间：3/14/2018 访问量：473
Jquery 验证必需 & minlenght 不适用于 xhtml 中的 jsf [重复]
Jquery validate required & minlenght does not work with jsf in xhtml [duplicate]
问：
我正在尝试使用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>
这是我试图验证的 inputext：
<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
}
}
}
);
});
我似乎也无法获得任何消息，表明它是必需的或需要的，以免来自验证.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>
答：
0赞
EliiTryToLearn
3/14/2018
#1
我也忘记了将#放入$（'reg-form'）.validate，当我也更改它时，$（'#reg-form'）验证似乎:)工作！
$(document).ready(function(){
$('#reg-form').validate({
rules:{
usernames:{
required: true,
minlength: 3
},
surname:{
minlength: 3
},
password:{
minlength: 3
}
}
}
);
});
评论
1赞
Kukeltje
3/14/2018
那么规则中的“用户名”不是我假设的 id，而是很可能是对客户端 html 的 name 属性的引用（由 jsf 生成） 实际上，它不是重复的，同时完全与 jsf 无关
评论