Forum

Thread tagged as: Question, Forms

Form placeholder value

Hi,

Is it the case that if you use a placeholder value within a form template this causes the form validation not to work?

In my test i had a placeholder value set for the email field of my form and neither browser validation of perch was activated. Once the placeholder value was removed it kicked in.

Is this correct?
Steve Forbes

Steve Forbes 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

6 years ago

Can we see your template?
Steve Forbes

Steve Forbes 0 points

6 years ago

Sure, this is it now, without a placeholder value set for email.

<perch:form id="contact" method="post" app="perch_forms">



    <div class="row">


    <div class="column column--full">


    <div>
        <perch:label for="name">Name</perch:label>
        <perch:input type="text" id="name" required="true" label="Name" placeholder="Your name"/>
        <perch:error for="name" type="required"><span class="error">Please add your name</span></perch:error>
    </div>

    </div><!--/column--full-->

    </div><!--/row-->


    <div class="row">


    <div class="column column--half">


    <div>
        <perch:label for="service">Type of Enquiry</perch:label>
        <perch:input type="select" id="service" required="true" options="Digital|digital, Branding|branding, Marketing|marketing, Print|print" class="basic" />
        <perch:error for="service" type="required"><span class="error">Please choose your service</span></perch:error>
    </div>

    </div><!--/column--half-->
    <div class="column column--half">

    <div>
        <perch:label for="email">Email</perch:label>
        <perch:input type="email" id="email" required="true" label="Email" />
        <perch:error for="email" type="required"><span class="error">Please add your email address</span></perch:error>
        <perch:error for="email" type="format"><span class="error">Please check your email address</span></perch:error>
    </div>

    </div><!--/column--half-->
    </div><!--/row-->

    <div class="row">
    <div class="column column--full">

    <div>
        <perch:label for="message">Message</perch:label>
        <perch:input type="textarea" id="message" required="true" label="Message"/>
        <perch:error for="message" type="required"><span class="error">Please add a message</span></perch:error>
    </div>


    <div>
        <perch:input type="submit" id="submit" value="Send" class="btn--primary" />
    </div>



    </div><!--/column--full-->

    </div><!--/row-->


</perch:form>
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

That shouldn't be the case, no. placeholder is an HTML5 field attribute that has no impact on validation.
Steve Forbes

Steve Forbes 0 points

6 years ago

To confirm, if I use a placeholder which matches a valid email address format the validation fails and it sends.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Placeholders do not get submitted with the form.