I want to implement client side validation using jQuery on my custom form.

I have enabled clientside validation contributed module

I have successfully attached custom js file using following code:

 $form['#attached']['library'][] = 'custom_form/cl-validation';

And in the JS file I have written below code:

(function ($, Drupal) {
  Drupal.behaviors.custom_form = {
    attach: function (context, settings) {
        
        var selectedCountry = ''
        
        $("#country").change(function(){
          selectedCountry = $(this).children("option:selected").val();
         
        });
        
                
        $('#user-number-value').keyup(function(){   
              $(this).val($(this).val().replace(/(\d{2})|([a-z]{2})\-?/,'$1-'))
        });
        
         $("input#user-number-value").focus(function() { 
            if(selectedCountry == undefined || selectedCountry == '') {
                $('#user-number-value').va('')
               // I want mark country dropdown as red and show a error
            }
        });
        
        
    }
  };
})(jQuery, Drupal);

I am not getting how to do this using jquery and stop form submission.

Please help me

I want to implement client side validation using jQuery on my custom form.

I have enabled clientside validation contributed module

I have successfully attached custom js file using following code:

 $form['#attached']['library'][] = 'custom_form/cl-validation';

And in the JS file I have written below code:

(function ($, Drupal) {
  Drupal.behaviors.custom_form = {
    attach: function (context, settings) {
        
        var selectedCountry = ''
        
        $("#country").change(function(){
          selectedCountry = $(this).children("option:selected").val();
         
        });
        
                
        $('#user-number-value').keyup(function(){   
              $(this).val($(this).val().replace(/(\d{2})|([a-z]{2})\-?/,'$1-'))
        });
        
         $("input#user-number-value").focus(function() { 
            if(selectedCountry == undefined || selectedCountry == '') {
                $('#user-number-value').va('')
               // I want mark country dropdown as red and show a error
            }
        });
        
        
    }
  };
})(jQuery, Drupal);

I am not getting how to do this using jquery and stop form submission.

Any help?

I want to implement client side validation using jQuery on my custom form.

I have enabled clientside validation contributed module

I have successfully attached custom js file using following code:

 $form['#attached']['library'][] = 'custom_form/cl-validation';

And in the JS file I have written below code:

(function ($, Drupal) {
  Drupal.behaviors.custom_form = {
    attach: function (context, settings) {
        
        var selectedCountry = ''
        
        $("#country").change(function(){
          selectedCountry = $(this).children("option:selected").val();
         
        });
        
                
        $('#user-number-value').keyup(function(){   
              $(this).val($(this).val().replace(/(\d{2})|([a-z]{2})\-?/,'$1-'))
        });
        
         $("input##user-number-value").focus(function() { 
            if(selectedCountry == undefined || selectedCountry == '') {
                $('#edit-field-customer-number-reseller-i-0-value').va('')
               // I want mark country dropdown as red and show a error
            }
        });
        
        
    }
  };
})(jQuery, Drupal);

I am not getting how to do this using jquery and stop form submission.

Please help me

I want to implement client side validation using jQuery on my custom form.

I have enabled clientside validation contributed module

I have successfully attached custom js file using following code:

 $form['#attached']['library'][] = 'custom_form/cl-validation';

And in the JS file I have written below code:

(function ($, Drupal) {
  Drupal.behaviors.custom_form = {
    attach: function (context, settings) {
        
        var selectedCountry = ''
        
        $("#country").change(function(){
          selectedCountry = $(this).children("option:selected").val();
         
        });
        
                
        $('#user-number-value').keyup(function(){   
              $(this).val($(this).val().replace(/(\d{2})|([a-z]{2})\-?/,'$1-'))
        });
        
         $("input#user-number-value").focus(function() { 
            if(selectedCountry == undefined || selectedCountry == '') {
                $('#user-number-value').va('')
               // I want mark country dropdown as red and show a error
            }
        });
        
        
    }
  };
})(jQuery, Drupal);

I am not getting how to do this using jquery and stop form submission.

Please help me