PHP表单提交后验证失效及CSS修改不生效问题求助

Hey there, let's tackle your two problems one by one—they're both common fixes, so you'll have this working in no time!

1. Form Validation Not Showing Errors & Redirecting Unexpectedly #

The core issue here is that you're not echoing your variables in the HTML, so neither error messages nor saved form values are being rendered. There's also a small mistake in how you're handling the textarea content. Here's what to fix:

a. Echo Variables in index.php #

Everywhere you have <?php $variable; ?>, you need to add echo to output the content. For error messages and form values, use htmlspecialchars() too—this adds extra protection against XSS attacks, even though your test_input() function helps.

Example Fixes:

• For the company name input and error span:

<input type="text" class="form-control" placeholder="Enter company name:" value="<?php echo htmlspecialchars($company_name); ?>" name="company_name">
<span class="error">
<?php echo $company_name_error; ?>
</span>

Repeat this pattern for all input fields (user_name, user_surname, email, number).

• For the textarea, since content goes inside the tag (not a value attribute):

<textarea class="form-control" placeholder="Type your message here..." rows="6" name="message"><?php echo htmlspecialchars($message); ?></textarea>

b. Fix the Form Action #

Your form's action is missing echo, so it's submitting to an empty string. Update it to:

<form id="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">

This ensures the form submits to the correct page and adds XSS protection.

c. Keep the Page on Validation Errors #

With the fixes above, when you submit the form, any errors will display in the .error spans, and the form will retain the values the user entered—no more confusing "redirect" behavior.

2. Custom CSS Classes Not Taking Effect #

There are two likely reasons for this:

a. Missing CSS File Inclusion #

Make sure your header.php includes a link to your style.css with the correct path. Since your CSS is in the public folder, the link should look like:

<link rel="stylesheet" href="public/style.css">

Double-check the path—if index.php is in your project root, this path is correct.

b. CSS Specificity Conflict #

You're using Bootstrap classes (like form-control, btn-success), which might have higher specificity than your custom .error and .success classes. To fix this, make your selectors more specific:

/* More specific selector for error messages */
.form-group .error { 
    color: red;
}

/* More specific selector for success message */
.container .success { 
    color: #ff9966; 
    text-align: center; 
    font-weight: bold; 
    font-size: 15px; 
}

This ensures your styles override Bootstrap's default styles where needed.

Bonus: Add Success Logic (Optional) #

In form_process.php, you can add a check to only show the success message when all fields are valid:

if (empty($company_name_error) && empty($user_name_error) && empty($user_surname_error) && empty($email_error) && empty($number_error)) {
    // Add your form processing logic here (e.g., send an email)
    $success = "Form submitted successfully!";
    // Clear form values after successful submission
    $company_name = $user_name = $user_surname = $email = $number = $message = "";
}

Hope these fixes get your form working perfectly! Let me know if you hit any snags along the way.

内容的提问来源于stack exchange，提问作者Ivan