{"id":2273,"date":"2016-08-13T18:47:31","date_gmt":"2016-08-13T18:47:31","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2273"},"modified":"2023-09-26T10:50:15","modified_gmt":"2023-09-26T10:50:15","slug":"bootstrap-validation-with-custom-error-message-by-using-jquery","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/","title":{"rendered":"Bootstrap Validation with Custom Error Message by using jQuery"},"content":{"rendered":"<h3><strong>Form validation in Bootstrap<\/strong><\/h3>\n<p>In HTML 5, the default form validation is done for the fields marked with the <em><strong>required\u00a0<\/strong><\/em>attribute. It will even check the email format for the field specified as type=&#8221;email&#8221; with the <strong><em>required<\/em><\/strong> attribute.<\/p>\n<p>However, the message is basic and displayed as:<\/p>\n<p><em>\u201cPlease fill in the field\u201d<\/em><\/p>\n<p>Where\u00a0the specific field will also get focus as you try to submit the form.<\/p>\n<p>As using the Bootstrap framework for creating the forms, the same default validation is applied. If you want to customize the validation messages for the form fields like displaying the field related message:<\/p>\n<p><em>\u201cYou must enter your name\u201d<\/em> etc.<\/p>\n<p>You may use JavaScript \/ jQuery for that. See the following section for simple and custom form validation using Bootstrap framework with jQuery.<\/p>\n<div id='stb-container-3024' class='stb-container-css stb-info-container stb-no-caption stb-image-big stb-ltr stb-corners stb-shadow stb-border stb-side' style='border: 3px solid #a68c3d;'><aside class='stb-icon'><img src='https:\/\/www.jquery-az.com\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-dark\/info.png'><\/aside><div id='stb-box-3024' class='stb-info_box stb-box'  style='background-image: linear-gradient(#09163d 30%, #8a82a1 90%);color: #fcfcfc;'><strong>Do you know?<\/strong> In Bootstrap 4, there is built-in support for the form validation with custom messages without using the jQuery. You simply require adding the Bootstrap 4 CSS and write a little JavaScript code. You can see an example here. For full tutorial about forms in Bootstrap 4 including validation go to this tutorial: <a href=\"\/bootstrap-4-form-explained-11-examples-online\/\">Bootstrap 4 forms<\/a><\/div><\/div>\n<h3><strong>A demo of simple form validation<\/strong><\/h3>\n<p>In this demo, the Bootstrap form validation is done by using the default behavior. Only the required attribute is added for the fields. Go to the demo page and press the submit button and see how validation message appears:<\/p>\n<p><a href=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/31.0_1-Bootstrap-free-form-theme-1.jpg\"><br \/>\n<\/a> <img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2275\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_1-bootstrap-validation.jpg\" alt=\"54.0_1-bootstrap-validation\" width=\"403\" height=\"342\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_1-bootstrap-validation.jpg 403w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_1-bootstrap-validation-300x254.jpg 300w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2276\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_2-bootstrap-email-validate.jpg\" alt=\"bootstrap email validate\" width=\"511\" height=\"354\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_2-bootstrap-email-validate.jpg 511w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_2-bootstrap-email-validate-300x207.jpg 300w\" sizes=\"(max-width: 511px) 100vw, 511px\" \/><\/p>\n<h6><a href=\"\/boots\/demo.php?ex=54.0_1\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p>The markup for this demo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\u00a0\u00a0\u00a0 &lt;div class=\"container\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h1&gt;Form validation demo&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;form class=\"form\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;div class=\"container\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for=\"name\"&gt;First Name:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input id=\"fname\" class=\"form-control\" type=\"text\" required&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for=\"name\"&gt;Last Name:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input id=\"lname\" class=\"form-control\" min=\"3\" required&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for=\"name\"&gt;Email address:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input id=\"email\" class=\"form-control\" type=\"email\" required&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-sm-4 col-sm-offset-4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button type=\"submit\" class=\"btn btn-success btn-block\"&gt;Submit&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>You can see, only adding the <em>required<\/em> attribute will not let move ahead if the field is left blank. In the case of email address, the format of the email is also checked as shown in the second graphic.<\/p>\n<p>Also, you saw the standard messages are shown i.e. \u201cPlease fill in this field\u201d with an icon.<\/p>\n<h3><strong>A demo of Bootstrap form validation with jQuery for custom error message<\/strong><\/h3>\n<p>In this demo, a jQuery plug-in is used for validating Bootstrap form. A number of different types of fields are used in the form. For displaying a custom error message rather a single standard message you may use the <strong><em>data-error-msg<\/em><\/strong> attribute with each input type. For example, for the name field, you may specify the following message by using the data-error-msg data attribute:<\/p>\n<p><em>\u201cPlease enter the name!\u201d<\/em><\/p>\n<p>Similarly, you may specify the message according to the field.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2277\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_3-bootstrap-validate-eror-message.jpg\" alt=\"bootstrap validate eror message\" width=\"375\" height=\"587\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_3-bootstrap-validate-eror-message.jpg 375w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_3-bootstrap-validate-eror-message-191x300.jpg 191w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/p>\n<h6><a href=\"\/boots\/demo.php?ex=54.0_2\" target=\"_blank\" rel=\"noopener nofollow\"><strong>See online demo and code<\/strong><\/a><\/h6>\n<p><strong>The code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\u00a0\u00a0\u00a0 &lt;div class=\"container\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;h1&gt;A demo of Bootstrap validate form&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;!-- don't forget novalidate to stop browser form validation --&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;form class=\"form\"&gt;\r\n\r\n\u00a0\u00a0 \u00a0&lt;div class=\"container\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for=\"name\"&gt;Your Name:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input id=\"lname\" class=\"form-control\" min=\"3\" required type=\"text\" data-error-msg=\"Must enter your name?\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for=\"name\"&gt;Email:&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input id=\"email\" class=\"form-control\" type=\"email\" required data-error-msg=\"The email is required in valid format!\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='row'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for='address'&gt;Address: (optional)&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input id='address' class='form-control' type='text'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label for='terms'&gt;Agree with T&amp;Cs?&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;select id='terms' class='form-control' required&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option selected disabled&gt;Select &lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"Y\"&gt;Yes&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option value=\"N\"&gt;No&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/select&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"checkbox\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input type=\"checkbox\" name=\"option1\" value=\"\" required data-error-msg=\"You have to select one expertise.\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HTML\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"checkbox disabled\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input type=\"checkbox\" name=\"option1\" value=\"\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CSS\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class='col-sm-4 form-group'&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"radio\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios1\" value=\"option1\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Python\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"radio\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios2\" value=\"option2\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Java\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"radio disabled\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios3\" value=\"option3\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SQL\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"row\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"col-sm-4 col-sm-offset-4\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;button type=\"submit\" class=\"btn btn-danger btn-block\"&gt;Proceed&lt;\/button&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;<\/pre>\n<p><strong>The jQuery code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\u00a0 &lt;script&gt;\r\n\r\n\u00a0\u00a0\u00a0 $(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('form').validator({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 validHandlers: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 '.customhandler':function(input) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/may do some formatting before validating\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input.val(input.val().toUpperCase());\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/return true if valid\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return input.val() === 'JQUERY' ? true : false;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('form').submit(function(e) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 e.preventDefault();\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if ($('form').validator('check') &lt; 1) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert('Hurray, your information will be saved!');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 })\r\n\r\n\u00a0\u00a0\u00a0 })\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/script&gt;<\/pre>\n<p>You can see, I have used the textboxes for the name and email while radio buttons and checkboxes are also used. The radios are optional while you have to check at least one checkbox. If all is well, the alert will display the\u00a0following message:<\/p>\n<p><em>\u201cHurray, your information will be saved!\u201d<\/em><\/p>\n<p>Otherwise, the\u00a0error message will keep on displaying.<\/p>\n<h3><strong>The validate plug-in<\/strong><\/h3>\n<p>You may download this nice plug-in from the GitHub website <a href=\"https:\/\/github.com\/psalmody\/validate-bootstrap.jquery\" target=\"_blank\" rel=\"nofollow\">here<\/a>. After downloading, just include the <em>validate-bootstrap.jquery.min.js<\/em>\u00a0file after referencing the jQuery and Bootstrap JS files.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Form validation in Bootstrap In HTML 5, the default form validation is done for the fields marked with the required\u00a0attribute. It will even check the email format for the field specified as type=&#8221;email&#8221; with the required attribute. However, the message is basic and displayed as: \u201cPlease fill in the field\u201d Where\u00a0the specific field will also &#8230; <a title=\"Bootstrap Validation with Custom Error Message by using jQuery\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/\" aria-label=\"More on Bootstrap Validation with Custom Error Message by using jQuery\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2277,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[30],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap Validation with Custom Error Message by using jQuery<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Validation with Custom Error Message by using jQuery\" \/>\n<meta property=\"og:description\" content=\"Form validation in Bootstrap In HTML 5, the default form validation is done for the fields marked with the required\u00a0attribute. It will even check the email format for the field specified as type=&#8221;email&#8221; with the required attribute. However, the message is basic and displayed as: \u201cPlease fill in the field\u201d Where\u00a0the specific field will also ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-13T18:47:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-26T10:50:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_3-bootstrap-validate-eror-message.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"375\" \/>\n\t<meta property=\"og:image:height\" content=\"587\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/\",\"name\":\"Bootstrap Validation with Custom Error Message by using jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-08-13T18:47:31+00:00\",\"dateModified\":\"2023-09-26T10:50:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap Validation with Custom Error Message by using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Validation with Custom Error Message by using jQuery","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Validation with Custom Error Message by using jQuery","og_description":"Form validation in Bootstrap In HTML 5, the default form validation is done for the fields marked with the required\u00a0attribute. It will even check the email format for the field specified as type=&#8221;email&#8221; with the required attribute. However, the message is basic and displayed as: \u201cPlease fill in the field\u201d Where\u00a0the specific field will also ... Read more","og_url":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/","article_published_time":"2016-08-13T18:47:31+00:00","article_modified_time":"2023-09-26T10:50:15+00:00","og_image":[{"width":375,"height":587,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/54.0_3-bootstrap-validate-eror-message.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/","url":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/","name":"Bootstrap Validation with Custom Error Message by using jQuery","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-08-13T18:47:31+00:00","dateModified":"2023-09-26T10:50:15+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-validation-with-custom-error-message-by-using-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap Validation with Custom Error Message by using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2273"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2273"}],"version-history":[{"count":7,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2273\/revisions"}],"predecessor-version":[{"id":9947,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2273\/revisions\/9947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2277"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}