0

以下のコードでは、2種類の検証があります。ユーザーがコーステキスト入力に何も入力しなかった場合のエラーメッセージを表示するJavaScript検証を使用します。

次に、php検証があり、ユーザーがコーステキスト入力に入力したコース内に評価があるかどうかを確認するクエリの結果の行が含まれていない場合は、次のことを示すメッセージが表示されます。評価が見つかりません。

私が抱えている問題は、ユーザーが「コース」テキスト入力に何も入力せずに送信ボタンをクリックすると、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 "";
    }

    ...

}
?>
4

4 に答える 4

2

送信イベントを完全に停止してみてください（ 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が何を言っているのかを見てください。呼び出し（またはに設定）するときに停止しているもの
を見つけるには、 quirksmodeをお勧めします。 、必要な場合：JSイベントの紹介も。stopPropagationcancelBubbletrue

コメントに応じて更新
します。

<?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を使用しているので、IEで変更イベントを委任するのは面倒なので、これを使用します。

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

于 2012-11-28T15:36:24.440 に答える
1

onsubmit関数にがあったとしても、私は信じてactionおり、両方とも発砲します。アクションを削除し、フォームPOSTをJavascript関数に移動して、フロントエンドの検証が成功したときに呼び出されるようにすることをお勧めします。onsubmitreturn false

于 2012-11-28T15:14:51.440 に答える
0

.valueが足りないからだと思います

var courseTextO = document.getElementById("coursesDrop").value;
// add line of debug
alert(courseText0);
于 2012-11-28T15:11:53.183 に答える
0

アクションはphp検証を呼び出すことであり、javascript検証を呼び出すonsubmitもあるため、両方を返す必要があります。

何が起こるかというと、コードは最初にjavascriptを実行し、次にphpを実行します。

問題を解決する最善の方法は、fromタグにアクションをまったく設定せず、結果に応じてjavascript検証関数にフォームのアクションを設定することです。

于 2012-11-28T15:12:37.617 に答える