In this tutorial I show you how to display custom message for required form fields and how to emit dinamically the invalid event on field validation in JavaScript.
- Details are in the comments in code.


Show custom message for required input fields

To show a custom message for required input fields, apply the invalid event to that field, then use the setCustomValidity() method in the function called by the 'invalid' event.
To remove the invalidate message on validated field, apply setCustomValidity('') in the input event.


- Example, if the email address added into a required email field is not valid; when submitting the form it will display a custom message.
<h4>Example custom message for required input fields</h4>
<p>Add some text in the input field and click Send.</p>

<form action='#' method='post'>
Email: <input type='email' id='email_1' required placeholder='Email address'/><br>
<input type='submit' value='Send'/>
</form>

<script>
var email_1 = document.querySelector('#email_1');

//register invalid event that shows a custom message on invalidated of the field
email_1.addEventListener('invalid', function(ev){
 ev.target.setCustomValidity('Your custom message');
});

//this is necessary to remove the invalidate mark on validated filed
email_1.addEventListener('input', function(ev){
 ev.target.setCustomValidity('');
});
</script>

Emitting the invalid event in JavaScript

By default, the invalid event is emitted when the form is submited. To emit this event dinamically on field validation in JS, call the reportValidity() method.


- For example, we have a date input field and we want the user to add a date equal or higher than current date; otherwise the field to display a custom message for required. So, we need to emit the invalid event if the value added in the 'date' field is not valid or is lower than current date.

<h4>Example emitting the invalid event</h4>
<p>For test, select a date lower then curent date.</p>

<input type='date' id='date1' required placeholder='Select a date'>

<script>
//function called by the change event
//receives the default event argument, a js object with target event
function dateActiv(ev){
 var elm = ev.target; //get the element from event
 var sel_date = new Date(elm.value);

 //if selected date is lower than current date
 if(sel_date <= new Date()){
 elm.value =''; //set empty to detect as not valid when invalid event is emitted
 elm.reportValidity(); //to emit invalid event
 }
}

//register change event that cals dateActiv()
document.querySelector('#date1').addEventListener('change', dateActiv);

//register invalid event that shows a custom message
document.querySelector('#date1').addEventListener('invalid', function(ev){
 if(ev.target.value =='' || ev.target.validity.typeMismatch) {
 ev.target.setCustomValidity('Your custom message');
 return false;
 }
 return true;
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
Set custom message for required and field validation

Last accessed pages

  1. Display data from PHP Array, or MySQL in HTML table (14212)
  2. Create simple Website with PHP (20530)
  3. PHP-MySQL Tutorials (2840)
  4. Read Excel file data in PHP - PhpExcelReader (60997)
  5. Adding data from HTML Table Rows in Form fields (5647)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (409)
  2. Read Excel file data in PHP - PhpExcelReader (329)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (254)
  4. PHP getElementById and getElementsByTagName (205)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (196)