jquery form URL validation custom message

Question

I have included jquery file and following HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

HTML:

<form action="http://www.google.com" onSubmit="return validate();">
        <input type="url" required="true" name="URL" >
        <input type="submit" value="Submit">
</form>

When i submit form with empty field give the message "Please fill out the field". I want to give my custom message.

How can i do?

Check for the `validate()` in your files. There you can find `Please fill out the field`. Change it!! — Ganesh Jadhav, Jul 16 '14 at 09:22
[This](http://stackoverflow.com/questions/10361460/how-can-i-change-or-remove-html5-form-validation-default-error-messages) helps you a lot. — Bhojendra Rauniyar, Jul 16 '14 at 09:23
also this http://stackoverflow.com/questions/7293153/html5-bubble-messages — Luca Davanzo, Jul 16 '14 at 09:25

Domain · Accepted Answer · 2014-07-16T16:41:48.023

You can use setCustomValidity:

<form action="http://www.google.com" onSubmit="return validate();">
  <input type="url"
    oninvalid="setCustomValidity('custom message ')"
    onchange="try{setCustomValidity('')}catch(e){}" required="true"  />
  <input type="submit" value="Submit">
</form>

In mozilla this can be achived using:

x-moz-errormessage="custom message"

In your case there are two cases; blank and custom message. For this particular condition following code will work:

<form action="http://www.google.com" onSubmit="return validate();">
  <input type="url"
    oninvalid="setCustomValidity(validity.typeMismatch
                                      ? '(custom) wrong url '
                                      : '(custom)Field cannot be blank ')"
    onchange="try { setCustomValidity('') } catch (e) {}" required="true"  />
  <input type="submit" value="Submit">
</form>

you can write your own code as per your requirement referring to the following page

Constraint Validation: Native Client Side Validation for Web Forms

Try the following link also , i haven't tried it but it may be of help for you, Custom messages in HTML5

Thanks WisdmLabs, but still one problem. There are two messages will be show. 1. required field (when field will be empty). 2. Invalid URL (when user will enter wrong url). Thanks, — Kashif Hashmi, Jul 16 '14 at 10:10

jquery form URL validation custom message

1 Answers1