Jquery 需要验证并且最小长度不适用于 xhtml 中的 jsf

Question

我正在尝试使用 jquery.validate.js 验证我的表单，这是我在 xhtml 文件

中的 link

<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 的三个字母，我 link 有什么错误吗？

这是整个 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>

Answer 1

我忘记也把 # 放在 $('reg-form').validate 中，当我也更改它时 $('#reg-form') 验证似乎有效:) !

$(document).ready(function(){
           $('#reg-form').validate({
                 rules:{
                     usernames:{
                         required: true,
                         minlength: 3

                     },
                     surname:{
                         minlength: 3

                     },
                     password:{
                         minlength: 3

                    }
                 }
             }

        );

        });

Jquery 需要验证并且最小长度不适用于 xhtml 中的 jsf

Jquery validate required & minlenght does not work with jsf in xhtml

javascript

jquery

validation

jsf

xhtml