javascript - 将错误放在各自的 div 中

Question

在这里，我从一个单独的页面获取错误消息，并将其显示在名为 #stage_error 的 div 中

$('#stage_error').html(error_string); 

因此，错误将像这样显示

The bus no field is required.
The comp id field is required.
The total seats field is required.

但我想要的是在其各自的 div 中显示错误

即，公交车号应显示在 div <div id='busno'> 附近，如下所示。

我怎样才能做到这一点？

Json:

{"busno":["Bus No field is required"],"Comp Id":["Comp Id is required."]}

更新:

请求脚本并显示错误:

<script>
    $(document).ready(function() {

        $("#driver").click(function(event) {
            var BusNo = $("#BusNo").val();
            var CompID = $("#CompID").val();
            var TotalSeats = $("#TotalSeats").val();
            var _token = $("#_token").val();
            $.post("managebus_register", {
                _token: _token,
                BusNo: BusNo,
                CompID: CompID,
                TotalSeats: TotalSeats
            },

            function(data) {
                if (data != '') {
                    obj = JSON.parse(data);
                    var error_string = '';
                    $.each(obj, function(entry) {
                        error_string += obj[entry] + '<br/>';
                    });

                    $('#stage_error').html(error_string);

                } else {

                    $('#stage_success').text('Resistered Succesfully');
                    $("#stage_error").hide();
                }
            });
        });
    });
</script>

Laravel Controller :

public function managebusregister()
    {   
        $BusNo = Input::get('BusNo');
        $CompID = Input::get('CompID');
        $TotalSeats = Input::get('TotalSeats');
        $data  =  Input::except(array('_token')) ;
        $rule  =  array(
                    'BusNo' => 'required|unique:company_bus',
                    'CompID' => 'required',
                    'TotalSeats' => 'required|max:50'
                        ) ;
        $validator = Validator::make($data,$rule);
        if ($validator->fails())
            {   
                $messages = $validator->messages();
                return json_encode($validator->messages());  //php encoded value
             }
        else
            {
            DB::insert('insert into company_bus (BusNo, CompID, TotalSeats) values (?, ?, ?)',
                                    array($BusNo, $CompID, $TotalSeats));       
            return '';
             }

        }

HTML 代码:

<div id="stage_error" style="color:red;font-size:15px"></div>
<div id="stage_success" style="color:green;font-size:20px"></div>

除此之外，我还有每个字段输入框，

<input type="text" id="BusNo" name="BusNo"/>
<input type="text" id="CompID" name="CompID"/>

如何在相应字段附近抛出错误消息

Answer 1

下面是方法:观察我在文本框后添加了带有错误的跨度。

CSS

<style>
    .error { color:red; font-size:15px; }
</style>

HTML

<input type="text" id="BusNo" name="BusNo" /><span class="error"></span>

<input type="text" id="CompID" name="CompID" /><span class="error"></span>

JavaScript 我根据 jQuery 标准做了一些更改，它应该可以正常工作，如果您不感兴趣，那么您可以忽略所有更改，但只能采用下面提到的 if 逻辑 block 。

if (!data) {...} 中添加的错误显示

$(function () {
    $(document).on("click", "#driver", function (event) {
        var BusNo = $("#BusNo").val(),
            CompID = $("#CompID").val(),
            TotalSeats = $("#TotalSeats").val(),
            _token = $("#_token").val();
        $.post("managebus_register", {
            _token: _token,
            BusNo: BusNo,
            CompID: CompID,
            TotalSeats: TotalSeats
        }).done(function (data) {
            $("span.error").empty();//All previous error messages cleared here.
            if (!data) {
                var obj = JSON.parse(data);
                //obj = {"busno":["Bus No field is required"],"Comp Id":["Comp Id is required."]}
                $.each(obj, function (entry) {
                    var targetSelector='';
                    if (entry == "busno") {
                        targetSelector = "#BusNo";
                    }
                    if (entry == "Comp Id") {
                        targetSelector = "#CompID";
                    }
                    if(targetSelector) //Here we're setting error message for respective field
                        $(targetSelector).next("span.error").html(obj[entry]);
                });
            } else {
                $('#stage_success').text('Resistered Succesfully');
                $("#stage_error").hide();
            }
        });
    });
});