Question

I am working on this code below and have had a stab at writing a IF statement around the code with //* .

The if statement logic should say ‘If all(x5) form input fields are empty then show alert message else do what’s between //*

The user must modify at least one of the five input fields with a letter or number, for the form to be submitted.

$('.submit').live('click', function(){

  // *
  $('.submit').parent().find('form').submit();
  alert('The form has been submitted!');
  // *

});

HTML Structure:

<div style="margin:50px;">
    <div id="search-prefix">
        <form method="post" action="">
            <input type="text" class="alpha-first default-value" name="" maxlength="1" value="?" />
            <input type="text" class="numeric plate-divide default-value" name="" maxlength="3" value="???" />
            <input type="text" class="alpha default-value" name="" maxlength="1" value="?" />
            <input type="text" class="alpha default-value" name="" maxlength="1" value="?" />
            <input type="text" class="alpha default-value" name="" maxlength="1" value="?" />
        </form>
    </div>
    <span class="btn submit">Search</span>
</div>

Any help would be greatly appreciated, Thanks

Answer 1

After looking at some of the answers I had another stab at doing it myself.

My approach was quite simple:

On keyUp if the value of form input is a ” empty string or nothing, then add a class to the submit button(which is a <span class="btn empty-fields">...</span>). Hence:

$('form input').keyup(function () {

    if(!($(this).siblings().andSelf().hasClass('field-error'))){        

        if ($(this).val() == '') {
            $('.btn').addClass('empty-fields').removeClass('no-submit submit');
            $('.error-notify').hide();      
        }
        else{ ...

When the user clicks on this element it triggers this response:

$('.empty-fields').live('click', function(){
    alert('One field MUST be modified to use Search!')
});  

Appreciate your effort guys, Thanks