Preventing multiple form submission errors via disabled submit

Question

I have a form validation where I insert errors below inputs to let users know they missed info. I initially encountered a bug where on click of submit multiple times with no info/incorrect emails in the form multiple error messages appeared.

I resolved this my setting an attribute of disabled to my button when the condition of the empty name of failed regular expression is met. However it has created a new problem - once the attribute of submit is set to disabled, it is permanent.

My javascript as it stands currently is below:

// Login validation
  $('#customer_login').submit(function(e) {
    // gets email input value
    var emailinput = $('#customer_email').val();

    // login page password value
    var pwdinput = $('#customer_password').val();

    if ($('input').length > 1) {
      $('#customer_login :submit').attr('disabled', false);
    }

    // if it fails error and preventDefault otherwise submit
    if (emailReg.test(emailinput) === false || emailinput === '') {
      e.preventDefault();
      $('#customer_login :submit').attr('disabled', true);
      $('#customer_email').css('border-color', '#f84141');
      $('#customer_email').after('<br><span class="field-error">Please enter valid email</span>');
    }

    // if password field is blank prompt user to put it in
    if (pwdinput === '') {
      e.preventDefault();
      $('#customer_login :submit').attr('disabled', true);
      $('#customer_password').css('border-color', '#f84141');
      $('#customer_password').after('<br><span class="field-error">Please enter your password</span>');
    }
  });

As a potential remedy to my error, I try un-disabling when there is content in the input, which I try to do so here:

if ($('input').length > 1) {
      $('#customer_login :submit').attr('disabled', false);
}

This does not work by itself in the global scope. I tried nesting this condition within each if statement that checks the value of the form input but that does not work, either. With all this said that leaves me with 3 questions:

1. Currently, when I run $('input').length in my console it is always returning 48, even when my inputs are empty. Why would an empty input return a value greater than zero?

2. My test email is 25 characters, password is 16 so 25 + 16 = 41. Even with my test email and pass in the field the value of $('input').length is still 48. Why?

3. running $('input').val().length in console as a check always returns 0 - why would this be?

I have a jsfiddle, but am getting an error: {"error": "Please use POST request"} despite having form action="POST". Changing to form method="POST" returns:

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x358a910>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x3661710>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x358a910>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x3661290>, 'help_text': '', 'name': 'js_wrap'}"}

https://jsfiddle.net/a4d5tLuh/2/

implementing both stackoverflow answers below were unsuccessful:

jsfiddle error {"error": "Please use POST request"} when submitting a form

Shell Form Does Not Validate JSFiddle

Answer 1

Fire the attr disable/re-enable on input change.

$('#myTextbox').on('input', function() {
    if ($('input').length > 1) {
    $('#customer_login :submit').prop('disabled',false);
} else {
    $('#customer_login :submit').prop('disabled',true);
    }
});

Answer 2

Answering the 3 questions:

1. This is happening because $('input').length is returning the amount of <input> elements on the page, not what is in the actual input.

2. See answer to #1

3. Syntax problem. State the value as a variable and reference it from there:

   var inputAmount = $('#customer_email').val();

   if (inputAmount.length >= 1) { Do something here.... }