Develop Reference

How to customize default browser error message on field type validation?

I have a form with an input of type=url. I want to show a custom message when the user tries to submit an invalid URL.
But, I don't want to re-check the url validity with custom javascript. I want the browser to validate, but I want a custom message. Is there an event I could listen to or some other property I could customize?

You can set the title with the pattern validation:
<form action="" method="get">
<input id="myURL"
name="myURL"
type="url"
required
pattern=".*\.myco\..*"
title="The URL must be in a Myco domain">
<input type="submit">
</form>

Alert blocking "required field" pop-up

I am making a form that when filled out is creates an alert telling you that it was a success and where the user is about to be redirected to. The problem is that this alert seems to be "blocking" the chrome "please fill out this field" pop-up for input fields with the required attribute that were not filled in.
It is (to my knowledge) only an Chrome problem. IE still shows the pop-up after the alert, and I have not been able to try Firefox.
For example
<form method="post" action="sendemail.php">
<input type="text" name="name" required>
<input type="submit" name="submit" onclick="javascript:alert('All done')">
</form>
The best result would be to only show the alert if all the required fields are filled in.

Simply remove the onclick and add onsubmit to the form tag:
<form method="post" action="sendemail.php" onsubmit="javascript:alert('All done')">
<input type="text" name="name" required/>
<input type="submit" name="submit"/>
</form>
onsubmit only fires once the form is submitted, which won't happen if a required input isn't filled in. onclick always fires when clicking the submit button, even if all fields aren't correct.

Validate form on submit only using parsley.js

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.

Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.

You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>

how to get rid of HTML 5 validation message with our own custom validation message

I am trying to validate required fields of form in HTML 5 with custom messages that are shown like a tooltip text near the field.
Here is the HTML code that I am trying for this purpose:
<form method="post" action="" id="validation">
Name:<input type="text" id="nome" name="nome" required="required" oninvalid="this.setCustomValidity('Name is required field')" oninput="setCustomValidity('')" /><br />
<br />
<br />
<input type="submit" value="Enviar" />
</form>
Above code is working fine in google chrome except in mozilla in following case:
press submit button, it will give validation message "Name is
required field"
fill something and then before pressing submit type backspace key on
keyboard to erase name completely. When it is completely erased it shows message
"Please fill out this field" on its own.Whereas it should again display a message "Name is
required field" or display just nothing.
Can some one test and provide an alternative solution for doing this in Mozilla.

You can add a "novalidate" attribute to the form element to disable html5 build-in validation, and then handle all the validation by javascript yourself.

If it is just the one field, then you could always just check for that event on the oninput:
oninput="if(this.value==''){this.setCustomValidity('Name is required field')} else {this.setCustomValidity('')};"
http://jsfiddle.net/j1c935ex/2/
For tidier code, you'd be better calling a function, especially if you are doing this on several fields.

How to override HTML5 validation pop up?

I have a a HTML form. I have added required tag against each input fields for which I require it to be filled. I am using $<form-name>.<input.field.name>.$error in AngularJS to check for errors during submission and apply error class to those fields.
Is there a way to prevent HTML5 validation popup retaining the required attribute at the same time?

You need the novalidate attribute.
<form novalidate>
...
</form>
Form's novalidate attribute on MDN

You can show your error message inside dirty condition of angular js and not on submission. Try like this:
<span style="color:red" ng-show="$<form-name>.<input.field.name>.$dirty && $<form-name>.<input.field.name>.$invalid">
<span ng-show="$<form-name>.<input.field.name>.$error.required">Name is required.</span>
</span>
This will show error message on focus out only. And on submit, default HTML5 required field error message will be shown.

You have to put novalidate at your form element:
<form novalidate>
<input type="text" required>
<button type="submit">Save</button>
</form>