javascriptjqueryvalidationparsley.jsparsley

parsley trigger an error for an empty field


How can I trigger an error message without submitting the form, for when I click on an input field and without typing something, if I click out of the input field it will trigger a validation error saying this field must not be empty. I tried using 'data-parsley-trigger="keyup"' but only works when something is typed in the input field

For example, if you click on the title field on this website https://deals.jumia.cm/en/posts/new and without typing anything in the field you click out of the title field, It will trigger a validation error

<form method="post" class="ad-form"  enctype="multipart/form-data" data-parsley-validate >      
   <label for="title">Title</label>                 
   <input type="text" id="title" name="title" placeholder="Title" required="required" data-parsley-maxlength="255" data-parsley-maxlength-message="Title can&#039;t have more than 255 signs." data-parsley-required-message="Please enter a title." data-trigger="focus" data-toggle="popover" data-content="Keep the title short and clear. Do not write the price in it or any information that is not relevant." data-parsley-validate-if-empty data-parsley-trigger="keyup"/> 
<script>
   $(document).ready(function(){
   $('[data-toggle="popover"]').popover();   
    });
   $('.popover-dismiss').popover({
   trigger: 'focus'
   })
 </script>

   <label for="category">Category</label>                        
   <select id="Category" name="category" required="required" data-parsley-required-message="Please select a Category." data-level="0">
   <option value="">Select Category</option>
   </select>                                            
   <label for="subcategory">Subcategory</label>                           
   <select id="Subcategory" name="subcategory" data-parsley-required-message="Please select a subcategory.">
   <option value="">Select Category first</option>
   </select>                            
   </form>                      

Solution

  • Use data-parsley-trigger="blur" and data-parsley-validate-if-empty=true.