javascript - Ajax Registration Form ins't validating rules -

javascript - Ajax Registration Form ins't validating rules -

i have registration form has rules check before letting form submit. such min, max length. when fill form , submit content goes in without validating. can have usernames 1 character long when should not be.

$(function(){ var form = $('form'); var submit = $('#submit'); var alert = $('.alert'); // validate form form.validate({ // validation rules rules: { // name field (required , minimum length 3) name: { required: true, minlength: 3 }, // username field (required , minimum length 3, max 8) username: { required: true, minlength: 3, maxlength: 8, }, // password field (required , minimum length 6, max 16) password: { required: true, minlength: 6, maxlength: 16 }, // password2 field must equal password field password2: { equalto: '#password' }, // email field required email: 'required' }, // submit ajax request submithandler: ajaxsubmit }); /** * ajax submit function * sending simple ajax request **/ function ajaxsubmit() { $.ajax({ url: 'http://codegamer.net/registration/ajax.php', type: 'post', datatype: 'json', // form serialize info data: form.serialize(), beforesend: function(){ alert.fadeout(); submit.val('sending...').attr('disabled', 'disabled'); }, success: function(data){ if ( data.status === 'success' ) { // if response status == success redirect success page $(location).attr('href','success.html'); } else { // not success! show error messages alert.html(data.status).fadein(); submit.val('sign up').removeattr('disabled'); } }, error: function(){ // show error message alert.html('sending request fail').fadein(); submit.val('sign up').removeattr('disabled'); } }); }; });

i new jquery, ajax, php learning along way.

there couple of potential issues here, create these changes , we'll see if there other problems.

var form = $('form'); var submit = $('#submit'); var alert = $('.alert');

you assigning these variable, good, should still wrap variable jquery: $(). updated throughout code , posted below.

this form selector won't homecoming based on saw on site:

var form = $('form');

give form unique id , utilize id selector $(#), same did submit button, or can utilize class that's there. re-create script.js file:

$(function(){ var form = $('form.form-horizontal'); var submit = $('#submit'); var alert = $('.alert'); // validate form form.validate({ // validation rules rules: { // name field (required , minimum length 3) name: { required: true, minlength: 3 }, // username field (required , minimum length 3, max 8) username: { required: true, minlength: 3, maxlength: 8, }, // password field (required , minimum length 6, max 16) password: { required: true, minlength: 6, maxlength: 16 }, // password2 field must equal password field password2: { equalto: '#password' }, // email field required email: 'required' }, // submit ajax request submithandler: ajaxsubmit }); /** * ajax submit function * sending simple ajax request **/ function ajaxsubmit() { $.ajax({ url: 'ajax.php', type: 'post', datatype: 'json', // form serialize info data: form.serialize(), beforesend: function(){ alert.fadeout(); submit.val('sending...').attr('disabled', 'disabled'); }, success: function(data){ if ( data.status === 'success' ) { // if response status == success redirect success page $(location).attr('href','success.html'); } else { // not success! show error messages alert.html(data.status).fadein(); submit.val('sign up').removeattr('disabled'); } }, error: function(){ // show error message alert.html('sending request fail').fadein(); submit.val('sign up').removeattr('disabled'); } }); }; });

javascript jquery ajax validation