Question

我想使用ajax-post jquery进行错误处理。我的代码如下： -

HTML：

<form name="frm" method="POST" action="">
    <input type="text" name="name" id="name" value="" />
    <input type="text" name="last_name" id="last_name" value="" />
    <input type="submit" name="Update" id="update" value="Update" />
</form>

现在，我想在输入验证错误时用红色矩形突出显示网站控件的部分（例如输入字段）。我可以在服务器端使用正则表达式来检测输入验证，但我可以让最终用户在提交网页时注意到他的错误。

有关正式示例，请参阅US-cert incident reporting form

感谢。

更新

我认为我的UI要求并不是很清楚。当用户点击提交并且是否存在输入验证错误时。我希望此代码显示在页面顶部

<div class="messages error">
<h2 class="element-invisible">Error message</h2>
One or more of the responses is incomplete or invalid. Please review and correct those         
questions marked with
<b>Error</b>
</div>

此外，与输入字段（例如名称）相邻应显示为

错误：名称然后用红色突出显示控件。

更新＃1

服务器端的Progess 我已经定义了一个php文件，它使用action元素从数据中接受。所有需要输入验证的控件的结果存储在php中定义的数组中。我已经使用有效控制元素上的echo验证了这部分工作。我只需要将这些元素传递回客户端。

但是代码没有在ajax代码中返回（测试），因为在处理.ajax函数时似乎存在一些问题。这是代码

 $(document).ready(function() {
 $("#edit-next").click(function (e) {
    e.preventDefault();
    var fname = $("#item_01").val();
    var lname = $("#item_02").val();
    var phone = $("#item_03").val();
    var status = $("#item_11").val();
    //var timeone = $("#item_12").val();


    //var lname = $("#last_name").val();
    var dataString = 'name=' + fname + '&last_name=' + lname;
    $.ajax({
        type: 'POST',
        data: dataString,
        url: 'validate.php',
        success: function (data) {
            alert(data);
        }
    });
   });
   });

表单操作的html代码是

<form action="" method="post" id="incident-report-form" accept-charset="UTF-8"><div><p style="margin:0px; padding:0px;"><font color="red"><i><noscript>Javascript is disabled in your browser.  This will cause some areas of the form to be unavailable.  Enable Javascript to access the complete form.</noscript></i></font></p><div id="package-header-message">

我认为Jquery代码没有考虑表单提交事件。当我点击提交按钮时，页面停留在那里没有任何反应，它不会在validate.php文件中回显任何内容。

PASEBIN validate.php

Answer 1

您需要从insert.php文件中返回特定值（或对象）。

我创建了一个基本示例，其格式为：

的返回值

ctrlID1&ctrlID2&ctrlID3&ctrlID4

示例：

    $("#update").click(function (e) {
        e.preventDefault();
        var name = $("#name").val();
        var last_name = $("#last_name").val();
        var dataString = 'name=' + name + '&last_name=' + last_name;

        $.ajax({
            type: 'POST',
            data: dataString,
            dataType: 'Text',
            url: 'insert.php',
            success: function (data) {
                //Split the returned string into an array
                var ctrlArray = data.split('&');
                //Itterate over each item of the array
                $.each(ctrlArray, function (index, item) {
                    //Set each control to have a red border
                    $('#' + item).css({ border: '1px solid red' });
                });
            }
        });
    });

我所做的是通过添加$.ajax文本来修改dataType调用（因为此示例需要一个字符串）并修改success函数来处理返回数据并设置控件的边界。

对网站使用服务器端错误处理（突出显示输入字段）

1 个答案: