0

html5 validation fires on all fields except apex:inputsecret field.Any reason behind this ?

<apex:page id="Registration" showHeader="false" controller="SiteRegisterController" title="{!$Label.site.register}" docType="html-5.0">
        <br/>
          <center>
                  <apex:outputText> <b>Self Registration</b></apex:outputText>
                      <apex:form id="theForm" forceSSL="true">
                        <apex:pageMessages id="error"/>
                        <apex:panelGrid columns="2" style="margin-top:1em;">
                          <apex:outputLabel value="{!$Label.site.username}" for="username"/>
                          <apex:inputText required="true" id="username" value="{!username}" />
                          <apex:outputLabel value="{!$Label.site.community_nickname}" for="communityNickname"/>
                          <apex:inputText required="true" id="communityNickname" value="{!communityNickname}" />
                          <apex:outputLabel value="{!$Label.site.email}" for="email" />
                          <apex:inputText required="true" id="email" value="{!email}" />
                          <apex:outputLabel value="{!$Label.site.password}" for="password"/>
                          <apex:inputSecret id="password" value="{!password}" required="true"/>
                          <apex:outputLabel value="{!$Label.site.confirm_password}" for="confirmPassword"/>
                          <apex:inputSecret id="confirmPassword" value="{!confirmPassword}" required="true"/>
                          <apex:outputText value=""/>
                          <apex:commandButton action="{!registerUser}" value="{!$Label.site.submit}" id="submit"/>
                        </apex:panelGrid> 
                        </apex:form>                  
          </center>
    </apex:page>
2

The required attribute on the <apex:inputSecret> does not appear to be passed through to the DOM. Maybe it is used for server side validation only from what I can tell.

the output of the <apex:inputSecret> is as follows:

<input id="j_id0:j_id1:abc" type="password" name="j_id0:j_id1:abc" value=""/>

The markup from the VF page was:

<apex:inputSecret required="true" id="abc"/>

The only way I was able to allow HTML5 validation was to add JS or jQuery to the document onReady to add the required attribute to all password inputs:

$('input[type="password"]').prop('required','true');

Once I did that the HTML5 validation worked as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.