Front end side jquery validation

I got some front end jquery I’m using to validate a form. How do perform that validation before the form submit?

Is it just a matter of using onclick event of the submit button?

You are in the right direction.

Not sure when you would like to have the validation show to the end-user. You want to show it somewhere during typing or when they select another input field? Would clearly define what you are looking for first. Perhaps constructive for inspiration: Client-side form validation - Learn web development | MDN

  <div class="col-md-12">
        <%= link_to t('actions.cancel'), @bag, class: "btn btn-default" %>
        <%= f.submit t('actions.save'),
                     id: 'update_button',
                     class: "btn btn-primary"
        %>
      </div>

here is my form submit button, I need to run this javascript before it gets submitted…

  $( "#validate_button" ).click(function() {

        if( !$("#bag_bin_id").val() ){
           alert("Bin, required field");
           $( "#update_button" ).prop( "disabled", true );
           // alert($("#bag_bin_id :selected").text() );
      ...etc...

I just put it into a button I can click to validate the form for now.

So basically, once the form (submit) is pressed, run validation, if it passes submit form, else display error message…

ok, really close now…

  <div class="col-md-12">
        <%= link_to t('actions.cancel'), @bag, class: "btn btn-default" %>
        <button class= "btn btn-primary", id= "validate_button" >Validate</button>
  
        <%= f.submit t('actions.save'),
                     id: 'update_button',
                     class: "btn btn-primary" %>
      </div>

I added the validate button into my form, (I’ll rename it later), but when I click on the validate button , it runs my validation script, then it submits the form.) Not sure why. I think i need to move f.submit into my validation, but unsure what the syntax for that would be.

Why not do validation on the click on the submit button?