Блог

Я использую primefaces 4, шаблон : Купертино. Я хочу сделать контур ввода «красным», если поле пустое. Я обновился до типа field required = «true», но контур остается в исходном состоянии, если они пусты. Но для полей типа 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>
  

В соответствии с опубликованным вами кодом, вводимый текст с идентификатором nom_pp выделяется красным, когда я ничего не ввожу. Единственное, что не сработает p:calendar , это то, что вы добавляете readonly в него атрибут.

Таким образом, решение просто удалить readonly атрибут p:calendar .
И, кстати, в нем нет name атрибута p:calendar , поэтому удалите его тоже.

Более того, вам нужно использовать <h:form> вместо <form> . И в нем также нет name параметра <h:form> .
Таким образом, ваш код должен выглядеть так:

     <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>
  

Обновить

Поскольку приведенное выше решение не работает в вашей среде, попробуйте заменить все компоненты HTML5 на компоненты primeface / jsf.
Я попробовал это, и это также работает в моей среде.
Взгляните на это:

 <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>
  

В вспомогательном компоненте:

 @ManagedBean
@ViewScoped
public class InputValidateBean implements Serializable{
private Date date;
private String nom;

public void doSubmit(){
    System.out.println("Do something!");
}
//getters and setters below...