Enter Key Detect + Null Value Then Form should not be submitted

Question

I have two text field as mandatory and rest of the of the fields are normal. Now i have to detect enter key and submit the form. I have done that but the issue is that when error occurs (for example : fields are null) then i have to stop submitting the form but still form is submitting.

<input autocomplete="off"  type="text" id="first_name"  size="10"
onkeypress="if(event.keyCode == 13){ 
document.getElementById('btn_search').click();
return false;}">

Here btn_search is the id of the search button and I have to execute it. but when field is null then form should not be submitted. Give me some suggestion ??

Even i make separate function in JavaScript file, I am getting same response. Actually I am facing this problem from last 48 hours.

Answer 1

document.getElementById('btn_search').click(function()
{
if($('#first_name').val() == "") {
// submit form here
}
});

That will check if the value of "first_name" is empty. It wouldn't be null, as it's a textbox. Or do you want to check for the existence of the textbox before you submit the form?

Answer 2

I would recommend you to perform the validation in the onsubmit action of the form instead of handling key presses in the inputs:

<form action="/foo" onsubmit="return validate();">
    <input autocomplete="off" type="text" id="first_name" size="10" />
    <input type="submit" value="Search" />
</form>

And in your validate function:

function validate() {
    var firstName = document.getElementById('first_name').value;
    var isFormValid = (firstName != '');

    return isFormValid;
}

Answer 3

You can do this too :)

<input autocomplete="off"  type="text" id="first_name"  size="10" onkeypress="if(this.value.replace(/^\s+|\s+$/g,'') != '' && event.keyCode == 13){ document.getElementById('btn_search').click(); return false;}">

Answer 4

Just add it to the onsubmit event in the form

<form action="http://google.com" onsubmit="return (document.getElementById('first_name').value != '')">
    <input autocomplete="off" type="text" id="first_name" size="10" />
</form>​

return (document.getElementById('first_name').value != '') just returns a boolean state for the input element, if its empty the bool would be false there for the onsubmit will fail causing the user to enter some details first.

Answer 5

At the end, i resolve the issue. Here, the explanation The thing which is missed by me, is to return the value. Here "btn_search" is id of button and through which a separate function is called. In which i have put up the validation. Now whole code is pasted over here. Please have a look.

    <input autocomplete="off"  type="text"  id="first_name" 
onkeypress="return enterKeyPress(event);" />

Javascript Function

//Enter-listener
function enterKeyPress(e)
{
    if (e.keyCode == 13) {
        document.getElementById('btn_search').click();
        return false;
        }
    }

Thanks a lot for the suggestions.