如何使用ajax Laravel 5.3进行验证

时间:2016-11-04 12:10:46

标签: php jquery laravel-5.3 ajaxform

我正在使用Laravel 5.在我的OrganisationsController中,我有一个方法addItem



 public function addItem(Request $request)
    {
        $rules = array(
            'nom' => 'required',
        );
        // for Validator
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails())
            return Response::json(array('errors' => $validator->getMessageBag()->toArray()));

        else {
            $section = new Section();
            $section->nom = $request->nom;
            $section->save();
            return response()->json($section);
        }
    }




  

Ajax代码



    $("#add").click(function() {
            $.ajax({
                type: 'post',
                url: '/addItem',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'nom': $('input[name=nom]').val()
                },
                success: function(data) {
                    if ((data.errors)) {
                        $('.error').removeClass('hidden');
                        $('.error').text(data.errors.title);
                        $('.error').text(data.errors.description);
                    } else {
                        $('.error').remove()
                        $('table').append("<tr class='section" + data.id + "'><td>" + data.id + "</td><td>" + data.nom + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-nom='" + data.nom +  "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>"); }
                   }
                });

            $('#noom').val('');
        });
&#13;
&#13;
&#13;

  

html代码

&#13;
&#13;
<div class="form-group row add">
    <div class="col-md-5">
        <input type="text" class="form-control " id="noom" name="nom"
               placeholder="New section here" required>
		<p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-2">
        <button class="btn btn-warning" type="submit" id="add">
            <span class="glyphicon glyphicon-plus"></span> Add new Section
        </button>
    </div>

</div>
&#13;
&#13;
&#13;

我不知道为什么我的验证不起作用。请为此提出一个示例。我正在使用laravel 5.我搜索了很多网站。但我无法得到解决方案。

3 个答案:

答案 0 :(得分:1)

如果您的验证失败,它将返回状态代码(错误代码)422

在您的$.ajax中,您只使用success,如果您的验证失败,则不会被调用。

您需要为ajax选项添加错误方法。使用上面的代码,你会有类似的东西:

success: function (data) {
    $('.error').remove()
    $('table').append("<tr class='section" + data.id + "'><td>" + data.id + "</td><td>" + data.nom + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>"); 
},
error: function (data) {
    if (data.errors) {
        $('.error').removeClass('hidden');
        $('.error').text(data.errors.title);
        $('.error').text(data.errors.description);
    }
}

希望这有帮助!

答案 1 :(得分:1)

解决方案是删除条件if(data.errors)

答案 2 :(得分:0)

对于jquery 3及更高版本,请使用此代码

 import {Card} from 'react-native-elements'
 export default class App extends Component{
 render(){
    return(
             <ScrollView horizontal={true}>
                         <Card  >

                          {
                                <View style={styles.card}>....</View>
                              }
                         </Card>
                      </ScrollView>
      );
         }
           }