validating a HTML form using jquery with php?

Question

I have a simple HTML file with a form.

<form action="register.php" method="get" id="submitform">
    First Name:
            <input type="text" class="fb-input" name="fname" id="firstname" />
            <br>
    <div class="fb-error">
    </div>

    <input type="button" name="signupBtn" id ="sub" value="Sign upw">

</form>

When I press the submit button, this will be checked at the jquery if the field is empty.

$(document).ready(function(){
    $("#sub").click(function(){
       register();
    });
});

function register(){
    var firstname=$("#firstname").val();

    if(firstname==""){
        $(".fb-error").show().html("You must fill the fields.");

    }else{
        $(".fb-error").hide();
        $("#submitform").submit();
    }
}

Then after being checked, it will be submitted to the php file to further check the characters inputted in the form, then will it will echo if an invalid character was found.

What I want is, the checking that i am doing after page submission in the php file will be transferred inside the jquery. Example:

function register(){
    var firstname=$("#firstname").val();

    if(...){
         <?php
            if(preg_match(....)){....}
         ?>
    }else{
        .....
    }
}

I tried this and it didn't work. I guess i cant put php inside the jquery. The reason i want to put the php inside the jquery is for me to be able to show an error message in the div part of the HTML because once I submit the page, It goes to another blank page where the error message of the php shows up.

What im doing is like the regisration of facebook that once you submit it and you input wrong characters, an error message will show up at the bottom. We are required to use php, jquery is just optional.

Could anyone help me with this? Or could suggest a better way to do this?

Updated:

Html code:

<html>
<head>
<title>Facebook Registration</title>
</head>
<body>
<form action="register.php" method="get" id="submitform">
    First Name:

    <?php $fname = isset($_POST['fname']) ? $_POST['fname'] : ''; ?>

    <input type="text" class="fb-input" name="fname" value="<?php echo $fname;     ?>">
        <br>

    <div class="fb-error">
    </div>

    <input type="submit" name="signupBtn" id ="sub" value="Sign upw">

</form>

Php file:

<?php
$fname=$_GET['fname'];

if((preg_match("/^[a-zA-z]{1,}$/",$fname))){
    echo "registered";
}
else{
    var_dump($_POST);
    echo "<form id='retForm' method='post' action='index.php'>";
    echo "<input type='hidden' name='fname' value='$_POST[fname]'>";
    echo "<script>$(document).ready(function() { $('#retForm').submit() });</script>";
}

?>

You can redirect the user to fill in the form again when your PHP script detects any error in the submission. You can simply echo the relevant error messages in that form. — Antony
– Antony, Commented Feb 2, 2013 at 11:50
@Antony Is is possible that when I redirect the inputted values in the form will still remain? — Katherine
– Katherine, Commented Feb 2, 2013 at 11:58
You can echo the value in the form as well, like this: <input name="fname" value="<?=$_GET["fname"]?>" />, and you can escape the form values if you like. However, you may wish to put that info in $_SESSION since you are dealing with redirects and may lose the info from $_GET. — Antony
– Antony, Commented Feb 2, 2013 at 12:00

user1646111 · Accepted Answer · 2013-02-02 11:59:59Z

2

You need to create a php file and write your validation, then, you need to call this page using AJAX and then send required parameters

$.get("validation.php", { fieldname: "firstname", value: $("#firstname").val(); },
   function(data){
     if(data){
     }
     else{
     }
   });

validation.php

<?php
$fieldname = $_GET['fieldname'];
$fieldvalue = $_POST['value'];

if($fieldname == 'firstname'){
 if(!preg_match('/^[a-zA-Z0-9]+$/', $fieldvalue)){
   echo 'Notvalid';
 }
}
if($fieldname == 'email'){

}
?>

answered Feb 2, 2013 at 11:59

user1646111

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

Comments

Achrome · Accepted Answer · 2013-02-02 13:30:47Z

1

What you can do in PHP, is simple. You can validate the form on the PHP script on the other page, and if you find any errors, you can redirect the form back with the $_POST variable.

Something like this on your form

<?php $fname = isset($_GET['fname']) ? $_GET['fname'] : ''; ?>
<input type="text" class="fb-input" name="fname" value="<?php echo $fname; ?>">

Now, in your register.php, you can write this snippet

<?php
    if(isset($_GET['signupBtn'])) {
        //do validation on $_GET['fname']
        //if the validation fails, send it back to the form with the value like this
        echo "<form id='retForm' method='GET' action='originalForm.php'>";
        echo "<input type='hidden' name='fname' value='$_GET[fname]'>";
        echo "<script>$(document).ready(function() { $('#retForm').submit() });</script>";
    }
    else {
        //proceed with registration
    }
?>

This will send the fname back as part of the $_GET variable and will be displayed in the form input. You can use AJAX calls to validate as well, but since you wanted to minimize the jQuery code, this would be one of the few ways you can achieve it.

edited Feb 2, 2013 at 13:30

answered Feb 2, 2013 at 12:06

Achrome

7,82114 gold badges38 silver badges45 bronze badges

11 Comments

Katherine Over a year ago

Thanks. In redirecting, I use the header() function. Is it correct? If I echo the form should it match the original form? Because when i redirect, the values are not being passed.

Achrome Over a year ago

You can't use header() in redirecting back, because it will not send any data. This is because header() has to be on the top of the page, and therefore no processing will take place. I have written the redirect script in jQuery in the answer, so you can use that.

Katherine Over a year ago

oic. but there is an error. It says undefined index (then the value inputted in form). It points in the line of the 2nd echo in your snippet. I changed the fname to $fname but it didnt fix the problem.

Achrome Over a year ago

Try var_dump($_POST) in the if statement and see if fname is set inside the array. If not, it may not be propagating from the original form.

Katherine Over a year ago

It is not set inside the array. I posted the current html and php code I am doing above in the lower part of the post. Could you check it if you dont mind. Thanks

|

Vlad · Accepted Answer · 2013-02-02 11:54:21Z

1

You can't use php in js. Use js regexps, or jq validation plugin: http://docs.jquery.com/Plugins/Validation

answered Feb 2, 2013 at 11:54

Vlad

3,63518 silver badges14 bronze badges

Collectives™ on Stack Overflow

validating a HTML form using jquery with php?

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related