How to make bootstrap validation purposefully invalid?

JavaScript
1

I have the following bootstrap validation going on in my form , JSFiddle here: https://jsfiddle.net/walker123/vboewtda/18/

I want to make the form invalid after a successful Ajax call (not shown in the code below). So I attempted to do like the following as shown in my code below:

var bootstrapValidator = $("#validateForm").data('bootstrapValidator');
                      bootstrapValidator.validate();
                      if(bootstrapValidator.isValid())
                      {
                       console.log("It's OK to proceed");
                       // Ajax call - not shown here
                       //Clear out selected values to make form invalid - not a perfect way?
                       $('#intended').val('');
                       $('#title').val('');
                       $('#description').val('');
                       $('#patientSetList').val('');
                       }
                       else {
                       console.log("All form fields are not validated, try again");
                       
                       }

So it does clear the values, but it keeps the boxes with green boundary and green check marks. I want to show it in red just like if someone doesn’t fill anything and hit the Request Data button. This is to make sure that the form is not valid and user doesn’t keep on hitting Request Data button with same data selected in quick succession. Is there a better / correct way of doing this? I was wondering if there is a way to make the form invalid. Just like I am doing something like this bootstrapValidator.validate(); , I wondering if I can make it invalid after successful Ajax call, inside the success function?

2

A good measure to prevent double data submission is to disable the submit button after it has been clicked once. You can then make your Ajax request and re-enable the button if need be.

1 Like
3

Hi @Jack_Tauson_Sr, wouldn’t it be more appropriate to just disable all form elements?

$('#validateForm').find('input, button').prop('disabled', true)

This way you can keep the values but the user can’t interact with the form any more, and it doesn’t appear as if the user entered some invalid data.

Edit: Ninja’d by @James_Hibbard. :-)

1 Like
4

Ok, Thanks very much.I will try that. I ended up using the following $('#validateForm').bootstrapValidator('resetForm', true); which has been clearing out the fields and showing errors to the user if they try to hit the button again and again in quick succession. Here’s my JS Fiddle with above change: https://jsfiddle.net/walker123/vboewtda/23/show

5

In this case, I would have to enable the button again, somehow by refreshing the page maybe if user wants to submit another request? Here’s what the change looks like in JSFiddle: https://jsfiddle.net/walker123/vboewtda/24/show

6

At what point I should consider enabling the button?
Because I will be disabling it inside the success function of Ajax call.

7

Why that? Normally, you disable it as soon as it is pressed, then fire off your Ajax call.

When the Ajax call completes, if everything is good, clear the form (or redirect, or whatever), otherwise re-enable the button and display an error message (so the user can modify their input).

8

Why that? Normally, you disable it as soon as it is pressed, then fire off your Ajax call.

Ok, so what you are saying is to use the following to disable the button:

$('#validateForm').find('input, button').prop('disabled', true)

as soon as the getConcepts() is called with user click? Maybe the very first line inside getConcepts() function would be the above line to disable the button.

And inside the success function of Ajax call, I can do the following things :

  1. Enable the button using the following :

$('#validateForm').find('input, button').prop('disabled', false)

  1. Clear the form using the following line:

$('#validateForm').bootstrapValidator('resetForm', true);

In this way the user would have enabled button and a cleared form so that they can put new fields.

Just wanted to confirm if the above flow seems correct?

And I may have to do the same thing in case Ajax call fails?

9

Hm but in your fiddle that function would get called whenever just clicking anywhere inside the form… you’d rather only disable the elements when submitting the form, and if the form is actually valid:

('#validateForm').submit(function () {
  var bootstrapValidator = $("#validateForm").data('bootstrapValidator')

  if (bootstrapValidator.isValid()) {
    $(this).find('input, button, textarea').prop('disabled', true)
    // AJAX request
  }
})

Yes just be sure to show a notification that the form successfully got submitted, maybe with a short delay before resetting the form and re-enabling its controls.

Enabling the controls yes, but if the request fails because of some network error (say) the user should be able to retry without having to fill all fields again. In any case, again let the user know what actually went wrong.

1 Like
10

Thanks @m3g4p0p. I will try to incorporate these changes and see how it goes. Appreciate your valuable inputs.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.