Question

在下面的代码中，我有两种类型的验证。我使用了一个javascript validaton，当用户没有输入课程文本输入中的任何内容时，会显示错误消息。

然后我有一个php验证，如果它不包含查询结果的行，该查询检查用户在课程文本输入中输入的课程中是否有任何评估，则显示消息说明没有找到评估。

我遇到的问题是，如果用户没有输入＆＃34;课程＆＃34;文本输入，他们点击提交按钮，它显示JavaScript验证和PHP验证。

这是不正确的，应该发生的是：

如果用户没有在课程文本输入中写入任何内容，那么它应该只显示javascript验证而不是php验证。
- 如果用户在课程文本输入中写了一些东西并提交了表单，但是它无法从查询中找到任何结果，那么它应该只显示php验证。

我的问题是我需要在代码中进行哪些更改才能够同时显示两条验证消息，并且只显示正确的验证消息？

换句话说，如果javascript验证失败，如何停止提交表单？然后显然我如何确保如果javascript验证成功，那么它确实提交了表单。

的Javascript

function validation() {

    var isDataValid = true;

    var courseTextO = document.getElementById("coursesDrop");

    var errModuleMsgO = document.getElementById("moduleAlert");

    if (courseTextO.value == "") {
        $('#targetdiv').hide();
        $('#assessmentForm').hide();
        $('#updateForm').hide();
        $('#submitupdatebtn').hide();
        errModuleMsgO.innerHTML = "Please Select a Course";
        isDataValid = false;
    } else {
        errModuleMsgO.innerHTML = "";
    }
    return isDataValid;

}

PHP / HTML

<?php

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}


$sql = "SELECT CourseId, CourseNo, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<input type="text" name="courses" id="coursesDrop" />' . PHP_EOL; 

?>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation();">
    <table>
        <tr>
            <th>Course: <?php echo $courseHTML; ?></th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>


<?php

if (isset($_POST['moduleSubmit'])) {    

    $sessionquery = "
    SELECT SessionId, SessionName, SessionDate, SessionTime, CourseId, SessionActive
    FROM Session
    WHERE (CourseId = ? AND SessionActive = ?)
    ORDER BY SessionName 
    ";

    $active = 1;

    $sessionqrystmt=$mysqli->prepare($sessionquery);
    // You only need to call bind_param once
    $sessionqrystmt->bind_param("si",$course, $active);
    // get result and assign variables (prefix with db)

    $sessionqrystmt->execute(); 

    $sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbCourseId, $dbSessionActive);

    $sessionqrystmt->store_result();

    $sessionnum = $sessionqrystmt->num_rows();   

    if($sessionnum == 0) {
        echo "<p><span style='color: red'>Sorry, You have No Assessments under this Module</span></p>";
    } 
    else 
    { 
        echo "";
    }

    ...

}
?>

Answer 1

尝试彻底停止提交事件（您遇到jQuery-itis，导致您滥用return false）：

method="post" onsubmit="return validation(event);">

在JS中：

function validation(e)
{
    //your checks
    if (isDataValid === false)
    {
        if (e.preventDefault)
        {
            e.preventDefault();
            e.stopPropagation();//VERY important
        }
        e.returnValue = false;
        e.cancelBubble = true;
    }
    return isDataValid;
}

要了解这两种方法的作用，请查看MDN必须说明的内容要在调用stopPropagation（或将cancelBubble设置为true）时找出您停止的，我建议quirksmode: events order非常容易关注，相当全面的描述，以及如果您需要它：their introduction to JS events, too。

更新
回应你的意见：

<?php

// connect to the database
include('connect.php');


/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    die();
}


$sql = "SELECT CourseId, CourseNo, CourseName FROM Course ORDER BY CourseId"; 

$sqlstmt=$mysqli->prepare($sql);

$sqlstmt->execute(); 

$sqlstmt->bind_result($dbCourseId, $dbCourseNo, $dbCourseName);

$courses = array(); // easier if you don't use generic names for data 

$courseHTML = "";  
$courseHTML .= '<input type="text" name="courses" id="coursesDrop" />' . PHP_EOL; 
$pHTML = '&nbsp;';//default paragraph inner
if (isset($_POST['moduleSubmit'])) {    
        $sessionquery = "
    SELECT SessionId, SessionName, SessionDate, SessionTime, CourseId, SessionActive
    FROM Session
    WHERE (CourseId = ? AND SessionActive = ?)
    ORDER BY SessionName 
    ";
    $active = 1;
    $sessionqrystmt=$mysqli->prepare($sessionquery);
    // You only need to call bind_param once
    $sessionqrystmt->bind_param("si",$course, $active);
    // get result and assign variables (prefix with db)
    $sessionqrystmt->execute(); 
    $sessionqrystmt->bind_result($dbSessionId,$dbSessionName,$dbSessionDate,$dbSessionTime, $dbCourseId, $dbSessionActive);

    $sessionqrystmt->store_result();

    $sessionnum = $sessionqrystmt->num_rows();   

    if($sessionnum == 0) {//error msg?
        $pHTML =  "<span style='color: red'>Sorry, You have No Assessments under this Module</span>";
    } 
}

?>
    <p id="warnings"><?php echo $pHTML;?></p><!-- echo the innerHTML created server-side -->
<form id="myForm" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation(event);">
    <table>
        <tr>
            <th>Course: <?php echo $courseHTML; ?></th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>

调整JS - 因为你正在使用jQuery，我会将其用作delegating a change event in IE is a pain：

$('#myForm').delegate('change','select',function()
{
    $('#warnings').html('');//clears current warnings
});

或者，更有效但更复杂的一点：

$('#myForm').delegate('change','select',(function(warnings)
{
    return function()
    {
        warnings.html('');
    };
}($('#warnings'))));

不要忘记将其包装在$(document).ready(function(){[here]});

中

Answer 2

即使onsubmit函数中有action，我相信onsubmit和return false也会触发。我建议删除操作并将表单POST移动到Javascript函数，以便在成功进行前端验证时调用。

Answer 3

我认为这是因为你遗失了.value

var courseTextO = document.getElementById("coursesDrop").value;
// add line of debug
alert(courseText0);

Answer 4

它必须返回两者，因为你的动作是调用php验证，你还有一个调用javascript验证的onsubmit。

发生的是，您的代码首先执行javascript然后执行php。

解决问题的最佳方法是在from-tag中根本不设置任何操作，并根据结果在javascript验证函数中设置表单的操作。

两个验证消息都出现在javascript和php上

4 个答案: