Make the outline of a input "red" if field is empty - primefaces

Question

I use primefaces 4, template : cupertino.
I want to make the outline of a input "red" if field is empty.
I upgraded to type field required = "true", but the outline remain in their original state if they are empty.
But for fields of type HTML 5 all goes well.
Thank you.
<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

According the code you post, the input text with id nom_pp get red-outlined when I input nothing. The only thing that won't work is p:calendar, which is because you put a readonly attribute in it.
So the solution is simply remove the readonly attribute of the p:calendar.
And BTW, there is no name attribute in p:calendar, so remove it, too.
What's more, you need to use <h:form> instead of <form>. And there is also no name parameter in <h:form>.
So you code should looks like:
<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>
UPDATE
Since the solution above doesn't work in your environment, try to replace all HTML5 components to primeface/jsf components.
I tried that and it also works in my environment.
Take a look at this:
<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>
In the backing bean:
#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...