Popup - if user enters bad input, how can I get it to error on submit

Question

I have a popup on my page that has a typeahead input on it. Right now you can type garbage and click submit and it lets you. I'm trying to write code that will throw an error on the popup if you type something that isn't included in the typeahead options and it won't let you submit it until you fix it. Here is my code, it is for making a school schedule that has classes in the typeahead dropdown.

var schedule = schedule.content.get();
var validClasses = Fp.filter(schedule.classes, function (class) { return !class.passed; }),
inputClasses = $('.optimizeViaClasses input.className').map(function () { return $(this).val(); }),
isErrorForValidClasses = Fp.all(inputClasses, function (inputClass) { return Fp.contains(validClasses, inputClass); });


if(validClasses !== inputClasses){
    $errorMessage.text('Your selection does not match the class(es) in the current schedule!');
    $errorMessage.show();
}

Right now if you enter garbage in the input field, this will throw an error but still let the user submit. How can I stop the user from submitting until the input is correct?

Here is my button:

$submitBtn.on('click', function(event){
            if(inputParameters() !== false){
                $myPopUp= $modal.find('#myData').detach()[0];   
            }
            event.preventDefault();
        });

and I checked the output of inputClasses in the Google developer console, it outputs the class and a prevObject. I just need the class...

Answer 1

got it. the error i had was throwing an error.

var schedule = schedule.content.get(),
validClasses = Fp.filter(schedule.classes, function (class) { return !class.passed; }),
inputClasses = $('.optimizeViaClasses input.className').map(function () { return $(this).val(); }),               
actualValidClasses = Fp.pluck(validClasses, 'className');


$.each(inputClasses , function(index, value){
if($.inArray(value, actualValidClasses ) === -1){                          
    $errorMessage.text('Your selection does not match the class(es) in the current schedule!');
         $errorMessage.show();
          error = true;
          return false;
  }
 });

Answer 2

Let javascript return either True or false and if the popup comes out return false other wise true.

For instance if it get into if return false other wise true.

Answer 3

since you modified your code i suppose you might want to try this instead:

http://api.jquery.com/event.stoppropagation/

also you might want to be doing something along the lines of this if stoppropagation does not result in the desired effect:

$("#formid").on("submit",function(e){
  // declare isValid outside of this and set it in your validation function or call it inside this and check for that.
  if(isValid) {
    e.stopPropagation();
  }
});

at least that's how i went about solving such issues usually. i hope it helps.