在提交php之前验证表单

Question

我有一个问题要问。

我有一个用户必须填写的表格。有几个字段有限制（例如名称不能为空）。问题是每次我按下提交按钮时，我都会弹出一个窗口，说名称不能为空，但它会自动重定向到另一个页面。所以问题是：如何修改我的代码以在重定向到页面或用户在外部单击或按 Tab 之前进行验证？

为了实现这一点，我使用 PHP、Contact Form 7 和 wordpress。 这是我的代码：

php函数createAccount.php

<?php 
require_once('../../../wp-load.php');
include ('../../../wp-config.php');
global $wpdb;    
$nameErr = "";
if(isset($_POST['next']))
{
$name=addslashes($_POST['cName']);
$surname=addslashes($_POST['cSurname']);
$email=addslashes($_POST['cEmail']);
$phone =addslashes($_POST['cPhone']);
$otherPhone=implode($_POST['cOtherPhone']);
$languages=implode(' | ', $_POST['cLanguages']);
$address=addslashes($_POST['cAddress']);
$neighborhood=$_POST['cNeighborhood'];
$pswd=addslashes($_POST['cPswd']);
$service=$_POST['cService'];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if(empty($_POST["cName"])) {
        $message = "wrong answer";
    echo "<script type='text/javascript'>alert('$message');
    </script>";
}
}else{

$wpdb->insert("Client",array(
"cName"=>$name,
"cSurname"=>$surname,
"cEmail"=>$email,
"cPhone"=>$phone,
"cOtherPhone"=>$otherPhone,
"cLanguages"=>$languages,
"cAddress"=>$address,
"cNeighborhood"=>$neighborhood,
"cPswd"=>$pswd,
"cService"=>$service
));
print_r("uq");
}  
}
 $wpdb->show_errors();
?>

联系表格 7 页面

<form action="/wp-content/plugins/my-codes/signUp.php" method="post">
[contact-form-7 id="422" title="Member Signup"]
</form>

联系表格

<p>Your Name (required)<br /> </p>
[text* cName id:cName]

<p>Your Surname (required)<br /> </p>
[text* cSurname id:cSurname]

<p>Your Email (required)<br /></p>
[email* cEmail id:cEmail] 

<label> Your Telephone Number (required)
[tel* cPhone id:cPhone tel-106 placeholder "123 456 789"] </label>

<label> Other Telephone Number (required)
[tel* cOtherPhone id:cOtherPhone tel-106 placeholder "123 456 789"] </label>

<h3>What languages do your prefer?</h3>
<input id=cLanguages type="checkbox" name=cLanguages[] value="English">
<use_label_element for="check_14">English</use_label_element>

<input id=cLanguages type="checkbox" name=cLanguages[] value="Hebrew">
<use_label_element for="check_15">Hebrew</use_label_element>

<input id=cLanguages type="checkbox" name=cLanguages[] value="French">
<use_label_element for="check_16">French</use_label_element>

<input id=cLanguages type="checkbox" name=cLanguages[] value="Spanish">
<use_label_element for="check_17">Spanish</use_label_element>

<p>Your Address (required)<br /> </p>
[text* cAddress id:cAddress]

<select cNeighborhood id:cNeighborhood name=cNeighborhood>
<option value="Bat Yam">Bat Yam</option>
<option value="Raanana">Raanana</option>
</select>

<label> Create Password (required)
[text* cPswd id:cPswd] </label>

<label> Confirm Password (required)
[text* cPswd id:cPswd] </label>

<label> Pick a Service (required)</label>
<select cService id:cService name=cService>
<option value="Babysitter">Babysitter</option>
<option value="Cleaner">Cleaner</option>
</select>

<input type="submit" name="next">

有什么帮助吗？谢谢！

更新联系表

<form id="commentForm" action="/wp-content/plugins/my-            codes/createAccount.php" method="post">
<p>Your Name (required)<br /> </p>
[text* cName id:cName]

<p>Your Surname (required)<br /> </p>
[text* cSurname id:cSurname]

<p>Your Email (required)<br /></p>
[email* cEmail id:cEmail] 

<label> Your Telephone Number (required)
[tel* cPhone id:cPhone tel-106 placeholder "123 456 789"] </label>
<label> Other Telephone Number (required)
[tel* cOtherPhone id:cOtherPhone tel-106 placeholder "123 456 789"] </label>

<h3>What languages do your prefer?</h3>
<input id=cLanguages type="checkbox" name=cLanguages[] value="English">
<use_label_element for="check_14">English</use_label_element>

<input id=cLanguages type="checkbox" name=cLanguages[] value="Hebrew">
<use_label_element for="check_15">Hebrew</use_label_element>

<input id=cLanguages type="checkbox" name=cLanguages[] value="French">
<use_label_element for="check_16">French</use_label_element>

<input id=cLanguages type="checkbox" name=cLanguages[] value="Spanish">
<use_label_element for="check_17">Spanish</use_label_element>

<p>Your Address (required)<br /> </p>
[text* cAddress id:cAddress]

<select cNeighborhood id:cNeighborhood name=cNeighborhood>
<option value="Bat Yam">Bat Yam</option>
<option value="Raanana">Raanana</option>
</select>

<label> Create Password (required)
[text* cPswd id:cPswd] </label>

<label> Confirm Password (required)
[text* cPswd id:cPswd] </label>

<label> Pick a Service (required)</label>
<select cService id:cService name=cService>
<option value="Babysitter">Babysitter</option>
<option value="Cleaner">Cleaner</option>
</select>

<input type="submit" name="submit" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js">   </script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
$("#commentForm").validate();
</script>

我想被重定向到

/wp-content/plugins/my-codes/createAccount.php

当我按下提交按钮时。

Answer 1

以<input id=cLanguages type="checkbox" name=cLanguages[] value="English"> 为例，您可以像这样添加所需的属性：

<input id=cLanguages type="checkbox" name=cLanguages[] value="English" required>

对 HTML 中的必填字段进行自动验证，适用于所有类型的输入。

Answer 2

在这种情况下，您可以使用 jquery 客户端验证：

Jquery Validation

$('#form_id').validate({
    rules:
    {
        elem_name:
        {
            required: true
        }
    },
    messages:
    {
        elem_name:
        {
            required: "Mandatory field"
        }
    }
});

Answer 3

您可以使用 jQuery Validation Plugin 进行验证和表单提交

您也可以指定自定义消息

// Setup form validation on the #register-form element
$("#register-form").validate({

    // Specify the validation rules
    rules: {
        firstname: "required",
        lastname: "required",
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 5
        },
        agree: "required"
    },

    // Specify the validation error messages
    messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        email: "Please enter a valid email address",
        agree: "Please accept our policy"
    },

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