高效有效的表单验证

Question

I have a working example of a form here . I need to use Javascript of Jquery form validation to verify that the user has inputted his/her own data. So far I have tried to check for values, but obviously this didn't work, because the inputs and textarea already have a default value, and so the user can submit straight away without filling in anything.

Any help would be much appreciated.

Thanks in advance!

EDIT

I am using this php to send the submitted data to an email address:

<?php
$name = $_POST['name'];
if ($name=="") {
$name="Nothing was returned for this part of the form.";
}
$email = $_POST['email'];
if ($email=="") {
$email="Nothing was returned for this part of the form.";
}
$subject = $_POST['subject'];
if ($subject=="") {
$subject="Nothing was returned for this part of the form.";
}
$comments = $_POST['comments'];
if ($comments=="") {
$comments="Nothing was returned for this part of the form.";
}
$theMessage7="<b>Results from the form at www.site.co.uk/contact.html</b><br /><br />" . "Name:&nbsp;" . $name . "<br />" . "Email:&nbsp;" . $email . "<br />" . "Subject:&nbsp;" . $subject . "<br />" . "Message:&nbsp;" . $comments . "<br />";
$theEmail7="mail@mail.com";
$theSubject7="New form submission";
$theHeaders7="MIME-Version: 1.0
Content-type: text/html; charset=iso-8859-1
From: form@bikeinc.co.uk
Subject: New form submission";
$theErrorFile7="www.site.co.uk/12345";
$theThanxFile7="received.html";
if (!(mail($theEmail7, stripslashes($theSubject7), stripslashes($theMessage7), stripslashes($theHeaders7)))) {
    header ( "Location: $theErrorFile7" );
        }else{
    header ( "Location: $theThanxFile7" );
}
?>

Answer 1

The effective form of form validation on user side is to use jQuery validation plugin , see examples on proper usage.

Note: user ALWAYS can disable javascript or use some kind of bot to send invalid not checked data, so you always have to write proper server side validation.

Frameworks often provides effective way of form validation, such as Zend_Validator .

It's common to prepare method for your php application such as:

public function validate() {
  if( !isset( $_POST['name'])){
    $this->field = 'name';
    $this->msg = 'Invalid user name';
    return false;
  }

  ...
  return true;
}

And use it in both sending script:

if( $form->validate()){
  send();
}

And in check script:

$data = array();
if( $form->validate()){
  $data['status'] = 'ok';
} else {
  $data['status'] = 'failure';
  $data['field'] = $form->field;
  $data['msg'] = $form->msg;
}
echo json_encode( $data);

End than use jquery and javascript for form validation "on the fly":

<input type="text" name="name" value="" onchange="ajaxValidate();" />

function ajaxValidate(){
  // Call ajax to check script and put results
}

If you're just building small project with one form or so, you could implement few methods like:

function is_post( $key); // Shorter than write isset( $_POST[ $key])
function get_post( $key, $defaultValue); // Shorter than isset( $_POST[ $key]) ? $_POST[ $key] : $default
function is_email(...); 
...

And jQuery validation:

function validateForm() {
  $('.input').removeClass( 'error');
  var status = true;
  if( $('input[name=name]').val() == '')){
     $('input[name=name]').addClass( 'error');
     setMessage( 'Name cannot be empty');
     status = false;
  }

  ...

  return status;
}

<form onsubmit='return validateForm();' ...>

Answer 2

Form validation is the process of ensuring that user input is complete, accurate, and reasonable before it is accepted and stored. It is an important aspect of web development as it helps to prevent the submission of invalid or malicious data. There are several ways to achieve efficient and effective form validation:

Use client-side validation: This type of validation is performed on the client's device (eg, web browser) using JavaScript. It is fast and can provide immediate feedback to the user, but it can be bypassed if the user has disabled JavaScript or is using a browser that does not support it.

Use server-side validation: This type of validation is performed on the server after the form has been submitted. It is more reliable than client-side validation because it cannot be bypassed, but it can cause delays as the form must be submitted and the server must process it before the user can receive feedback.

Use both client-side and server-side validation: Combining both types of validation can provide the best of both worlds. Client-side validation can provide immediate feedback to the user and reduce the load on the server, while server-side validation can ensure that the data is valid and secure.

Use regular expressions to validate input: Regular expressions are a powerful tool for validating input and can be used to check that a string matches a specific pattern (eg, an email address, a phone number).

Use pre-built form validation libraries: There are many pre-built libraries and frameworks (eg, jQuery Validation Plugin, AngularJS) that can make it easy to implement form validation with minimal effort.

Use appropriate input types and attributes: HTML5 introduced several new input types (eg, email, url, number) and attributes (eg, required, min, max) that can be used to improve the accuracy of form validation.

Answer 3

You could try using the HTML5 required attribute... however this will only work with browsers that support it. For example:

<label for="name">Name:</label>
<input type="text" name="name" required="required" id="name">

This will only work if you use the HTML5 doctype though.

Then for the PHP validation in the instance the HTML5 validation hasn't run due to incompatible browser... or if JavaScript doesn't run due to it being disabled/unavailable/broken.

// check input
if (empty($_POST['name']))
{
    $errors['name'] = 'Please provide your name.';
}

I then display the errors when I show the page to the user after the authentication has gone through.

<label for="name">Name:</label>
<input type="text" name="name" required="required" id="name">
<?php if (!empty($errors['name'])): ?><p class="error"><?php echo $errors['name']; ?></p><?php endif; ?>

Also... remember to protect yourself from SQL injection, XSS and mallicious code injection if this is going to be saved in a database or displayed to other users.