Question

I’m trying to use jquery to get data from a form and stop the form submiting using this code:

$form = $('form#signup')
$form.submit(function(event){
  event.preventDefault();
  var $input=$('#signup :input')
  console.log($input.username)
  alert($input.username)
})

but the form still posts the data and the alert box does not appear.Also firebug brings up the error $ is not defined and Node.js crashes

the form (writen in jade):

html
  head
    script(src='javascripts/signupValidation.js')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
    script(src='javascripts/validator.js')
  body
    form(id='signup',method='post',action='/signup')
      label Firstname
      input(type='text', name='firstname')
      label Lastname
      input(type='text', name='lastname')
      label Username
      input(type='text', name='username')
      label Password
      input(type='password', name='password')
      label Password again
      input(type='password', name='password2')
      label Email
      input(type='email', name='email')

  input(type='submit',value='Sign up', onclick="")

Answer 1

Problem with your code [not issue with form submission]

$input.username is not valid jQuery to reference another element.

var usernameInput = $input.filter('[name="username"]');

Looks like you are not adding the code on document.ready so you probably are attaching it to nothing. Change it to be:

jQuery( function() {
    $form = $('form#signup');
    $form.submit(function(event){
    });
}

Also looks like you are including the validation code before the jQuery code. I bet looking at the JavaScript console in the browser has some nice error messages.