Cannot make simple jQuery work

Question

I'm learning jQuery, but I can't make this example work. I know it's quite simple but I don't know what I'm missing. I'm trying to add the class "invalid" in a textfield.

<script src="../jquery/jquery-1.8.2.js"></script>
<script src="../jquery/jquery.ui.effect.js"></script>
<script>
  $(function() {
    $('button.btn').on('click', function() {
      if ('create_task' == $(this).val()) {
        for (var i = 0; i < $('.validate').length; i++) {
          if ("" == $('.validate').eq(i).val()) {
            $('.validate').eq(i).addClass('invalid');
          } else {
            $('.validate').eq(i).removeClass('invalid');
          }
      }
      return false;
   }         
  });
</script>
<main>
    <form>
       <div class="row">
          <div class="input-field col s6">
             <input name="name" type="text" class="validate">
             <label class="active" for="task_name">Task Name</label>
          </div>
       </div>

       <button class="btn" type="submit"  value="create_task" name="createTask">Create Task</button>
    </form> 
</main>

Answer 1

You have a syntax error as you haven't closed the $(function(){ in your script.

Moreover move your return false to an outer block (so that you'll prevent the default submit behaviour of the button) AND, use submit (which is same as using .submit() method) event as such:

$(function() {
$('button.btn').on('submit', function() {
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
          if ("" == $('.validate').eq(i).val()) {
            $('.validate').eq(i).addClass('invalid');
          } else {
            $('.validate').eq(i).removeClass('invalid');
          }
      }
   }     

  return false;    
  });
});

NOTE: If you wanted, you could change the type='submit' to type='button' while triggering the click event, thus ridding you of returning false in your JavaScript code.

Answer 2

So, the problem in your code is that you are missing some closing ')' and '}'. The following will make it correct:

$(function() {
 $('button.btn').on('click', function() {
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
      if ("" == $('.validate').eq(i).val()) {
        $('.validate').eq(i).addClass('invalid');
      } else {
        $('.validate').eq(i).removeClass('invalid');
      }
    } // end of for
  return false;
  } // end of if
 }); // end of click
});

You can try to debug your javascript by using the debugger in the browser, by clicking F12. In the Element/Console section, you can see the error messages you have in your code. It will give you some hints regarding the error you have. Also, if you do not have any syntax problem, you are able to use

debugger;

In your code and when you run it in your browser with the debugger mode (F12), you can debug step by step into your code and look at the values of the variables and see how your program is behaving.

But, if in your code you just want to see if the input text is empty or not by the time the user click the button, you can try the following snippet:

<script>
$(function() {
  $('#create_task').on('click', function() {
    event.preventDefault(); // prevents submission
    if ($('.validate').val().length > 0) {
       $('.invalid').hide(); 
    } else {
       $('.invalid').show();
    }// end of if
  }); // end of click
});
</script>

<main>
  <form>
   <div class="row">
      <div class="input-field col s6">
         <input name="name" type="text" class="validate">
         <div class="invalid" style="display:none">Invalid input</div>
         <label class="active" for="task_name">Task Name</label>
      </div>
   </div>

   <button id="create_task" class="btn" type="submit" name="createTask">Create Task</button>
  </form> 
</main>

Pay attention how I changed the name of button to id to detect the button without extra validation. I hope it helps.

Answer 3

Your code has number of issues. First of all, if you want to capture form submission use .submit function and not click on button. Otherwise, you can remove the form tag and capture the click on button element.

Additionally, you can loop through jQuery object using .each. Using for is definitely faster as it is a native JavaScript functionality. I have made a proof of concept on this jsfiddle.

See this code.

$(function () {
	$('button.btn').on('click', function () {
		if ('create_task' == $(this).val()) {
			$('.validate').each(function (i, e) {
				if ("" == $(e).val()) {
					$('.validate').addClass('invalid');
				} else {
					$('.validate').removeClass('invalid');
				}
			})
		}
	})
});

.invalid
{
    background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
    <div class="row">
        <div class="input-field col s6">
            <input name="name" type="text" class="validate">
            <label class="active" for="task_name">Task Name</label>
                
                <input name="name" type="text" class="validate">
                <label class="active" for="task_name">Task Name</label>
                     
        </div>
    </div>
    <button class="btn" type="submit" value="create_task" name="createTask">Create Task</button>
</main>

Answer 4

There is a syntax error in your Javascript. The corrected Javascript:

$(function() {
    $('button.btn').on('click', function() {
        if ('create_task' == $(this).val()) {
            for (var i = 0; i < $('.validate').length; i++) {
                if ("" == $('.validate').eq(i).val()) {
                    $('.validate').eq(i).addClass('invalid');
                } else {
                  $('.validate').eq(i).removeClass('invalid');
                }
            }
            return false;
        }
    });
});

Fiddle here: https://jsfiddle.net/s9x1Ldfm/

However I would add the return does not make a lot of sense. It returns false sometimes and void others. What exactly are you trying to do with that?

Answer 5

Use event.preventDefault() to prevent the form submission.

Check out his fiddle.

Here is the snippet.

$('button.btn').click(function(event) {
  event.preventDefault();
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
      if ("" == $('.validate').eq(i).val()) {
        $('.validate').eq(i).addClass('invalid');
      } else {
        $('.validate').eq(i).removeClass('invalid');
      }
    }
  }
});

.invalid {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="row">
    <div class="input-field col s6">
      <input name="name" type="text" class="validate" />
      <label class="active" for="task_name">Task Name</label>
    </div>
  </div>
  <button class="btn" type="submit" value="create_task" name="createTask">Create Task</button>
</form>