我正在尝试使用 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
}
}
}
);
});
我似乎无法收到任何需要或需要的消息，至少验证者有三封信.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>
我也忘记了将#放在$('reg-form'(中.验证当我也更改它时$('#reg-form'(，验证似乎:)有效！
$(document).ready(function(){
$('#reg-form').validate({
rules:{
usernames:{
required: true,
minlength: 3
},
surname:{
minlength: 3
},
password:{
minlength: 3
}
}
}
);
});