How to customize the text of the required popup?

Question

When the form is submited and there are required fields not filled then there is an automatic popup which is shown positioned relatively to the field :

enter image description here

<form id="frm" action="<?php echo PAGE_SERVICE; ?>?action=ServiceAjouterAbonneExec" method="post" name="frm" enctype="">
    <div class="toggle">
        <table>
            <tr>
                <td><b><?php echo _getText("admin.login.form.titre");?></b></td>
                <td><input type="text" name="login" id="login" maxlength="25" required /></td>
            </tr>
            <tr>
                <td><b><?php echo _getText("admin.mdp.form.titre");?></b></td>
                <td><input type="password" name="mdp" id="mdp" maxlength="50" required /></td>
            </tr>
            ...
            <tr>
                <td colspan="2" align="right" ><input name="btnValider" id="btnValider" type="submit" value="<?php echo _getText("main.valider");?>"  class="btn btn-blue"/></td>
            </tr>
        </table>
    </div>

    </form>

I want to show a similar popup when the user enters an already existing login which already exists in the database. How to do that ?

Start with creating a serverside script that checks the database, then call that script with ajax, and then read up on HTML validation and how to customize those error messages, which is not very hard to do. — adeneo, Jul 22 '14 at 11:56
yes I know those steps , but the problem is the popup : how to create and show it ? — pheromix, Jul 22 '14 at 11:58
A quick search will show you how to do that -> http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message — adeneo, Jul 22 '14 at 11:59

score 1 · Accepted Answer · answered Jul 22 '14 at 12:04

You can use oninvalid="this.setCustomValidity('Enter Value Here')"

<form id="form">
    <input name="test" required placeholder="Required value" oninvalid="this.setCustomValidity('Enter Value Here')" oninput="setCustomValidity('')" />
    <input type="submit" name="submit" value="submit" />
</form>

http://jsfiddle.net/xmcUk/

How to customize the text of the required popup?

1 Answers1