如果字段为空，则将输入轮廓设置为“红色”

Question

我使用primefaces 4，模板：cupertino。 我想做一个输入的大纲＆＃34; red＆＃34;如果字段为空。 我升级到类型字段required =＆＃34; true＆＃34;，但如果它们为空，则轮廓保持原始状态。 但对于HTML 5类型的字段一切顺利。

谢谢。

<form id="form_inscri_pp" name="form_inscri_pp">

    <h:panelGrid columns="2" cellpadding="5"  >
        <h:outputText  value="Nom:" styleClass="label_inscri_pp"/>
        <input  id="nom_pp" class='inscription_candidat' 
                placeholder='Saisissez votre nom' type='text' name="nom_pp"
                pattern="^[A-Za-z ]+$" maxlength="25" required="required" 
                autocomplete="on"/>

        <h:outputText   value="Date de naissance: " styleClass="label_inscri_pp"/>
        <p:calendar name="DN_pp" id="DN_pp" value="#{calendrier.date}"  
                    locale="fr"  showOn="button" navigator="true" 
                    pattern="dd/MM/yyyy" mindate="1/1/1950" maxdate="31/12/1993" 
                    mask="true" required="true" readonly="true"  size="20" />
    </h:panelGrid>

    <input class='button_inscri'  type='submit' value="S'inscrire" />  
    <input class='button_inscri'  type='button' value='Réinitialiser' />
</form>

Answer 1

根据您发布的代码，当我什么都没输入时，标识为nom_pp的输入文本会被红色勾勒出来。唯一不起作用的是p:calendar，这是因为您在其中添加了readonly属性。

因此解决方案只需删除readonly的{​​{1}}属性。
顺便说一句， p:calendar中没有name属性，所以也将其删除。

此外，您需要使用p:calendar代替<h:form>。 <form>中也没有name参数 因此，您的代码应如下所示：

<h:form>

---

更新

由于上述解决方案在您的环境中不起作用，请尝试将所有HTML5组件替换为primeface / jsf组件。
我试过了，它也适用于我的环境 看看这个：

    <h:form id="form_inscri_pp" >

        <h:panelGrid columns="2" cellpadding="5"  >
            <h:outputText  value="Nom:" styleClass="label_inscri_pp"/>
            <input  id="nom_pp" class='inscription_candidat' 
                    placeholder='Saisissez votre nom' type='text' name="nom_pp"
                    pattern="^[A-Za-z ]+$" maxlength="25" required="required" 
                    autocomplete="on"/>

            <h:outputText   value="Date de naissance: " styleClass="label_inscri_pp"/>
            <p:calendar id="DN_pp" value="#{inputValidateBean.date}"  
                        locale="fr"  showOn="button" navigator="true" 
                        pattern="dd/MM/yyyy" mindate="1/1/1950" maxdate="31/12/1993" 
                        mask="true" required="true" size="20" />
        </h:panelGrid>

        <input class='button_inscri'  type='submit' value="S'inscrire" />  
        <input class='button_inscri'  type='button' value='Réinitialiser' />
    </h:form>

在支持bean中：

<h:form id="form_inscri_pp" >
    <h:panelGrid columns="2" cellpadding="5"  >
        <h:outputText  value="Nom:" styleClass="label_inscri_pp"/>
        <p:inputText id="nom_pp" styleClass="inscription_candidat" 
                     placeholder="Saisissez votre nom" maxlength="25"
                     required="true" autocomplete="on" value="#{inputValidateBean.nom}">
                 <f:validateRegex pattern="^[a-zA-Z]+$" />
        </p:inputText>

        <h:outputText   value="Date de naissance: " styleClass="label_inscri_pp"/>
        <p:calendar id="DN_pp" value="#{inputValidateBean.date}"  
                    locale="fr"  showOn="button" navigator="true" 
                    pattern="dd/MM/yyyy" mindate="1/1/1950" maxdate="31/12/1993" 
                    mask="true" required="true" size="20" />
    </h:panelGrid>

    <p:commandButton styleClass="button_inscri" value="S'inscrire" 
                     validateClient="true" update="form_inscri_pp" 
                     action="#{inputValidateBean.doSubmit()}"/>
</h:form>