Scenario where I need the Custom Message
Here I used an input control i.e. to input user as Customer name.
<input type="text" id="txtCustomerName" required>
For validation I need show " Customer name is required !" where as the current input show me an message like "please fill out this field."
So I need to change the default error message to custom error message. My custom error message with tag is as follows.
<input type="text" id="txtCustomerName" required placeholder="Enter Customer name"
oninvalid="this.setCustomValidity('Customer name is required !')" oninput="setCustomValidity('')">
Details Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form >
<input type="text" id="txtCustomerName" required>
<br>
<br>
<input type="text" id="txtCustomerName"
required placeholder="Enter Customer name"
oninvalid="this.setCustomValidity('Customer name is required !')"
oninput="setCustomValidity('')">
<br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
Here I used an input control i.e. to input user as Customer name.
<input type="text" id="txtCustomerName" required>
For validation I need show " Customer name is required !" where as the current input show me an message like "please fill out this field."
So I need to change the default error message to custom error message. My custom error message with tag is as follows.
<input type="text" id="txtCustomerName" required placeholder="Enter Customer name"
oninvalid="this.setCustomValidity('Customer name is required !')" oninput="setCustomValidity('')">
Details Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form >
<input type="text" id="txtCustomerName" required>
<br>
<br>
<input type="text" id="txtCustomerName"
required placeholder="Enter Customer name"
oninvalid="this.setCustomValidity('Customer name is required !')"
oninput="setCustomValidity('')">
<br>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
No comments:
Post a Comment