1

Background##

i am a complete noob with JS (i can slightly read it, but cant write it)

Problem

Link: http://s328792954.websitehome.co.uk//multi_step_form/

Im trying to make a multi-step form, and i cam across a tutorial on-line which showed a basic example.

anyway.....

i've added a field for number only (example:loan amount) but the coding i use is obviously wrong because now it will not accept any form of input
+ i think its interfering with the other coding.

the section starting with '//check if amount input is numbers' is the problem

Copy code

   $(function(){
//original field values
var field_values = {
        //id        :  value
        'username'  : 'username',
        'password'  : 'password',
        'cpassword' : 'password',
        'firstname'  : 'first name',
        'lastname'  : 'last name',
        'email'  : 'email address',
        'amountborrow' : '000'
};


//inputfocus
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] }); 
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('input#amountborrow').inputfocus({ value: field_values['amountborrow'] });  




//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');

//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
    //remove classes
    $('#first_step input').removeClass('error').removeClass('valid');


    //check if amount input is numbers
    var fields = $('#first_step input[type=amountborrow]');
    var  numOnly = /^[0-9]$/;
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='amountborrow' && !numOnly(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });  




    //check if inputs aren't empty
    var fields = $('#first_step input[type=password]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });     


    if(!error) {
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                });

                return false;
        } else {   
            //update progress bar
            $('#progress_text').html('33% Complete');
            $('#progress').css('width','113px');

            //slide steps
            $('#first_step').slideUp();
            $('#second_step').slideDown();     
        }               
    } else return false;
});


$('#submit_second').click(function(){
    //remove classes
    $('#second_step input').removeClass('error').removeClass('valid');

    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
    var fields = $('#second_step input[type=text]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });

    if(!error) {
            //update progress bar
            $('#progress_text').html('66% Complete');
            $('#progress').css('width','226px');

            //slide steps
            $('#second_step').slideUp();
            $('#third_step').slideDown();     
    } else return false;

});


$('#submit_third').click(function(){
    //update progress bar
    $('#progress_text').html('100% Complete');
    $('#progress').css('width','339px');

    //prepare the fourth step
    var fields = new Array(
        $('#username').val(),
        $('#password').val(),
        $('#email').val(),
        $('#firstname').val() + ' ' + $('#lastname').val(),
        $('#age').val(),
        $('#gender').val(),
        $('#country').val(),
        $('#amountborrow').val()                       
    );
    var tr = $('#fourth_step tr');
    tr.each(function(){
        //alert( fields[$(this).index()] )
        $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
    });

    //slide steps
    $('#third_step').slideUp();
    $('#fourth_step').slideDown();            
});


$('#submit_fourth').click(function(){
    //send information to server
    alert('Data sent');
});

});

please help (sorry if this is wrong section i didnt really understand forum sections)

#edit#
@Banaan information was great :) THANKS!

but the form still accepts the incorrect info... the 'field' doesnt but the form does and proceeds to the next step. Do i need a }else return false somewhere?

 //first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
    //remove classes
    $('#first_step input').removeClass('error').removeClass('valid');


    //check if amount input is numbers
    var fields = $('#first_step input[type=amountborrow]');
    var  numOnly = /^[0-9]+$/;
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<3 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='amountborrow' && !numOnly.test(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);


        } else {
            $(this).addClass('valid');
        }           
    });  


    //check if inputs aren't empty
    var fields = $('#first_step input[type=password]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });     


    if(!error) {
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                });

                return false;
        } else {   
            //update progress bar
            $('#progress_text').html('33% Complete');
            $('#progress').css('width','113px');

            //slide steps
            $('#first_step').slideUp();
            $('#second_step').slideDown();     
        }               
    } else return false;
});

Pleas further Advise

Improve this question

1 Answer 1

Reset to default
2

You created some sort of a new RegExp object, which is the right direction, except you probably want to accept any number instead of only a single digit:

var numOnly = /^[0-9]+$/;

In which [0-9] means a digit, and + means one or more occurrences.

The way in which you use that RegExp object, however, is incorrect. if you look at the e-mail regular expression in the second step, they use

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var value = $(this).val();
emailPattern.test(value)

The emailPattern.test(value) part is what you missed. To check if the input is a number, you use not !numOnly(value) but !numOnly.test(value).

For a more complete tutorial on javascript regular expressions, you might want to take a look at W3Schools

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thanks very much. That has mad the field area work... However it is not working with the rest of the form. i think i need to add a '}else return false ' somewhere, but when i place it in places it just fails :( Please advise more As in it will shake but the form allows it to proceed 'code'
You should add an error++; if the number is invalid, like you do in the password validity check right underneath. I think you can figure out why ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.