Does Bootstrap Tour allow error message validation?

[jimmy-thomas]

I'm using Bootstrap tour but the issue is that I need to only tour/highlight fields that are incorrect. The problem with Bootstrap tour is that hardcode all of your element id's or classnames. The form errors that I have are based off of incorrect fields. So I can't hard code the field ID's since I won't know which fields are incorrect until a user fills out a form.

// Instance the tour
    var tour = new Tour({
    backdrop: true,
    steps: [
    {
      element: "#primary-address-line-label-2",
      title: "Title of my step",
      content: `<h3 class="tool-tip-title">Review/Update Your Address</h3>
      <div class="tip-content">
      <p>Our records indicate the address we have on file for you may be incorrect.</p>
      <p>Please make any edits in the field below. Click "Save & Continue" once you are finished.</p>
      </div>
      <div class="number-of-actions">1 of 5 Actions</div>`,
      placement: "top"
    }
  ]});

  // Initialize the tour
  tour.init();

  // Start the tour
  tour.start(); 

My html is:

<div>
  <label>City</label>
 <input class="form-control" type="text" id="City" class="error"><span style="display: inline-block;">City is required.</span>
 </div>

<div>
  <label>City</label>
 <input class="form-control" type="text" id="State" class="error"><span style="display: inline-block;">State is required.</span>
 </div>

As you can see from my example about city and state fields have an error class and are incorrect but any field could be incorrect based off of user input.

Does Bootstrap tour have the ability to create dynamic elements/ steps based off of fields that are incorrect?

Are there any other jQuery or JavaScript plugins that Validate Fields with tooltips?

[IGreatlyDislikeJavascript]

Seems like this isn't a tour requirement? If I understand what you want, a page is loaded with N fields. Some, all or none of those fields are incorrect, and you want the tour to step through each incorrect field to request a fix?

If so, a validation plugin (e.g. 1000hz bootstrap validator) would handle the validation and error highlighting, and a simple dialog could pop up to start as a notification.

Alternatively if you really want to use tour to step through, why not build the step array programmatically? After document is loaded, identify all the fields with error (jquery.find / .each etc), create the step array, then init the tour with your programmatically created steps. Although that raises the question of how the fields get the error state to start - why not highlight then?

If you really want to do this at "tour time", use my fork which allows you to prevent moving to the next step by returning false in onNext, and to programmatically select element for each step - you could then use jquery to search for the first element that has the error class.

Hope that helps