在提交php之前驗證表單

Question

我有一個問題要問。

我有一個用戶必須填寫的表格。 有幾個具有限制的字段（例如，名稱不能為空）。 問題是，每當我按下“提交”按鈕時，我都會彈出一個對話框，說名稱不能為空，但會自動重定向到其他頁面。 因此，問題是：在重定向到頁面或確保用戶單擊外部或按Tab之前，如何修改代碼以進行驗證？

為了使用PHP實現此即時消息，請聯系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驗證

$('#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();
    }
});