Question

I click the button and nothing happens. If I take out the validation code, then clicking the button works and it falls back to the PHP validation that I have implemented. I coded up the jquery validation first and it worked, then I coded up the PHP side. But then the jquery validation stopped working after the PHP side is okay.

Can someone help?

I tried adding

submitHandler: function(form) {
    form.submit();
}

like this:

submitHandler: function(form) {
    form.submit();
},
rules: {
    ...
}

But nothing happened.

Here is the relevant code, let me know if anything is unclear, thanks! I’ve been stuck on this for a while now.

if (isset($_POST['submit']))
{
    foreach($_POST as $key=>$value)
    {
        unset($_SESSION[$key]);
        $_SESSION[$key] = $value;
    }
    $errors = validation($job);
    if (count($errors) == 0)
    {
        sendEmail($job);
        sendEmailToApplicant($job);
    }
}

$output = "
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='http://jzaefferer.github.com/jquery-validation/jquery.validate.js'></script>
<script type='text/javascript'>
jQuery.validator.setDefaults({
    debug: true,
    success: 'valid'
});
jQuery.validator.addMethod('phoneUS', function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ''); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, 'Please specify a valid phone number');
</script>
<script>
    $(document).ready(function(){
        $('#applicationForm').validate({
            rules: {
                firstName: {
                    required: true,
                    rangelength: [2, 15]
                },
                lastName: { 
                    required: true,
                    rangelength: [2, 15]
                },
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    required: true,
                    phoneUS: true
                },
                website: {
                    url: true
                }
            }
        });
    });
</script>


<form id='applicationForm' name='applicationForm' method='post' enctype='multipart/form-data'>

            ...

    <input id='submit' type='submit' name='submit' />
</form>";

Answer 1

really quick to try. not sure if this is the issue since I really didnt look too close, but why is there jQuery. in some actions if you dont have a jquery.noConflict.

try changing those to just $ like this maybe:

<script>
$(document).ready(function(){
    $('#applicationForm').validate({
        rules: {
            firstName: {
                required: true,
                rangelength: [2, 15]
            },
            lastName: { 
                required: true,
                rangelength: [2, 15]
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phoneUS: true
            },
            website: {
                url: true
            }
        }
    });

    $.validator.setDefaults({
        debug: true,
        success: 'valid'
    });
    $.validator.addMethod('phoneUS', function(phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, ''); 
        return this.optional(element) || phone_number.length > 9 &&
            phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
    }, 'Please specify a valid phone number');
});