Form Validation

Ohkay so i basically have my form doing what i want it to do but i dont know how to style the errors. i have the style in css but i dont know how to link it to the js. also in safari the email error only shows if its an empty field not if its invalid . it does work in other browsers though so idk how to make it work in safari lol
heres what i got going so far

.
any help is much appreciated
thanks in advanced :slight_smile:

it doesn’t work because the type=“email” is not supported by all browsers so you have to create your own validator for it

here is an example :

BTW, </br> should be <br>

Have you tried styling your errors in your JS code like this?

name_error.innerHTML = "<span style='color:red'>Name is required</span>";

1 Like

that works great! :slight_smile: is there any way to add media queries to this?

Using JavaScript to validate a form’s inputs will only work if the visitor has JS enabled. You would be better doing the validation server-side.

How would I go about doing that?

You’ll need to use a server-side language such as PHP, Python or Perl.

I have this php script for my contact form ; but I’m not sure how to implement the error :confused:

<?php
/* Set e-mail recipient */
$myemail = "example@example.com";//"YOUR EMAIL ADDRESS";

/* Check all form inputs using check_input function */
$name = check_input($_POST['name'], "Enter your name");
$email = check_input($_POST['email']);
$message = check_input($_POST['message'], "Write your message");

/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
{
show_error("E-mail address not valid");
}
/* Let's prepare the message for the e-mail */
$message = "

Name: $name
E-mail: $email

Message:
$message

";

/* Send the message using mail() function */
mail($myemail, "AllenTrey Prod.", $message);

/* Redirect visitor to the thank you page */
header('Location: contact.html');
exit();

/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}

function show_error($myError)
{
?>
<html>
<body>

<p>Please correct the following error:</p>
<strong><?php echo $myError; ?></strong>
<p>Hit the back button and try again</p>

</body>
</html>
<?php
exit();
}
?>

Why do you need media queries for this? They don’t work with in-line styles.

It’s not a bad thing to double up and have validation both sides, as having it client side can be more convenient for the user, being able to correct errors before submission. But you should always have it server-side to be secure.

Looks like you already have some form of server-side validation.
Though I would probably change the preg_match on the email to the more robust filter_var

if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    show_error("E-mail address not valid");
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.