jQuery event.keyCode for Enter (13) is skipped if there are required fields in the HTML

Question

I am using the required="yes" attribute in a few fields within my form. I have a search box within the form to auto-populate a drop-down list if the item they are looking for is not already on there. In my jQuery, I watch the keyup event for the field. $("input#search-input-text").keyup(function(event){}. I use event.preventDefault(); right away before I do anything else.

One of the things I watch for is the Enter button. When pressed, I check to see if one of the search results are currently selected. If it is, I insert the result into the dropdown list on the page. But if it is not, I let the form be submitted.

The issue is that when I have required form fields using the attribute, it ignores my jQuery and cancels the action before my jQuery can run and tells me the field is required. I use this code just fine on forms that do not have required fields using the attribute. How do I catch the Enter key press before the built-in browser functionality stops me due to the required fields?

Please note that I cannot use keydown instead. Plus, even if I do I still get the warning about the required field even when I return false (though that's obvious). I want to catch the keyup before the browser does and stop it completely under certain circumstances.

---

Some of my code. Specifically, case 13 of the switch statement. The form should only submit if the outer if statement is false.

$("input#search-input-text").keyup(function(event){
    event.preventDefault();

    var _search_action = $("input#search-action").val();
    var _search_term = $("input#search-input-text").val();
    var dosearch = true;

    switch (event.keyCode) {
        case 13:
            dosearch = false;
            if ($("#drop-search-search-results").find("li.selected").text()){
                if ($('#search-drop-down').val()) {
                    $('#' + $('#search-drop-down').val()).append('<option value="' + $("#drop-search-search-results").find("li.selected").attr('id') + '">' + $("#drop-search-search-results").find("li.selected").text() + '</option>');
                    $('#' + $('#search-drop-down').val()).val($("#drop-search-search-results").find("li.selected").attr('id'));
                    $('.textbox-drop-search').hide();
                    $('.search-default-selection').show();
                    $("input#search-input-text").val('');
                }else{
                    $("input#search-input-text").val($("#drop-search-search-results").find("li.selected").text());
                }

                $("#drop-search-search-results").hide().html("");

                return false;
            }else{
                $("form.drop-search").submit();
                return true;
            }
            //alert('enter');
            break;
        case 37:
            dosearch = false;
            //alert('left');
            break;
        case 38:
            dosearch = false;
            moveUp();
            //alert('up');
            break;
        case 39:
            dosearch = false;
            //alert('right');
            break;
        case 40:
            dosearch = false;
            moveDown();
            //alert('down');
            break;
    }

Thanks, James

Answer 1

Well, I ended up searching more and found that to get the browser to not validate the form, I had to add the attribute novalidate to the form tag. So what I did was add the attribute when I started the search sequence, then removed it once done. This solved my issue.

Just for clarity, I used $('form.form-class').attr('novalidate', true); and $('form.form-class').removeAttr('novalidate'); as needed.

Answer 2

You can use invalid event and preventDefault there. Keyup will still work. See snippet example:

$('input').on('invalid', function(e){
    e.preventDefault(); 
    
});

$('input').on('keypress', function(e){
    if(e.keyCode == '13'){
      
    e.target.value = "input";
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" action="">
    Required input: <input type="text" name="usrname" required/>
    <input type="submit" />
</form>