Fix HTML5 autofocus

- Focus Email if error of if value is null (Page load)
- Otherwise Focus password
This commit is contained in:
touffies
2013-10-16 10:38:29 +02:00
parent 2c47e8cf72
commit d091359299

View File

@@ -16,7 +16,7 @@
<article class="col-main" role="main" aria-labelledby="main-label"> <article class="col-main" role="main" aria-labelledby="main-label">
<h1 id="main-label" class="page-header">{intl l="Login"}</h1> <h1 id="main-label" class="page-header">{intl l="Login"}</h1>
{form name="thelia.customer.login"} {form name="thelia.customer.login"}
<form id="form-login" action="{url path="/login"}" method="post" role="form" {form_enctype form=$form}> <form id="form-login" action="{url path="/login"}" method="post" role="form" novalidate {form_enctype form=$form}>
{if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if} {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
{form_field form=$form field='success_url'} {form_field form=$form field='success_url'}
<input type="hidden" name="{$name}" value="{navigate to="return_to"}"> {* the url the user is redirected to on login success *} <input type="hidden" name="{$name}" value="{navigate to="return_to"}"> {* the url the user is redirected to on login success *}
@@ -31,10 +31,12 @@
<div class="form-group group-email{if $error} has-error{/if}"> <div class="form-group group-email{if $error} has-error{/if}">
<label for="{$label_attr.for}">{$label}</label> <label for="{$label_attr.for}">{$label}</label>
<div class="control-input"> <div class="control-input">
<input type="email" name="{$name}" id="{$label_attr.for}" value="{$value}" class="form-control" {$attr} {if $required}aria-required="true" required{/if}{if $error} autofocus{/if}> <input type="email" name="{$name}" id="{$label_attr.for}" value="{$value}" class="form-control" {$attr} {if $required}aria-required="true" required{/if}{if !$value || $error} autofocus{/if}>
{if $error} {if $error}
<span class="help-block"><span class="icon-remove"></span> {$message}</span> <span class="help-block"><span class="icon-remove"></span> {$message}</span>
{assign var="error_email" value="true"} {assign var="error_focus" value="true"}
{elseif !$value}
{assign var="error_focus" value="true"}
{/if} {/if}
</div> </div>
</div> </div>
@@ -55,7 +57,7 @@
<div class="form-group group-password{if $error} has-error{/if}"> <div class="form-group group-password{if $error} has-error{/if}">
<label for="{$label_attr.for}" class="sr-only">{$label}</label> <label for="{$label_attr.for}" class="sr-only">{$label}</label>
<div class="control-input"> <div class="control-input">
<input type="password" name="{$name}" id="{$label_attr.for}" class="form-control" autocomplete="off"{if !isset($error_email) && $error } autofocus{/if}> <input type="password" name="{$name}" id="{$label_attr.for}" class="form-control" autocomplete="off"{if !isset($error_focus)} autofocus{/if}>
{if $error} {if $error}
<span class="help-block"><span class="icon-remove"></span> {$message}</span> <span class="help-block"><span class="icon-remove"></span> {$message}</span>
{/if} {/if}