"Аякс" представить успешного, но валидатор jQuery не форме проверить


"Аякс" представить успешного, но валидатор jQuery не форме проверить

08.10.2020 11:54:39 Просмотров 13 Источник

Я пытаюсь отправить форму с помощью jQuery+Ajax. Форма будет успешно отправлена (через Ajax Submit), если нет никаких проблем с полями ввода. Однако если поля ввода имеют проблемы (например, пустые поля), то валидатор не срабатывает. Консоль показывает сообщение об ошибке в виде

SQLSTATE[23000]: Integrity constraint violation: 1048......

и контроллер переходит к части error: ajaxsubmit, но я хочу, чтобы валидатор сначала показывал сообщения об ошибках в соответствующих полях ввода (small используется для отображения ошибок)

Вот мой код клинка-

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

     <!-- CSRF Token Meta Added -->
      <meta name="csrf-token" content="{{ csrf_token() }}">
       <!-- Ajax script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

    <!-- Sweet Alert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <!-- JQuery validation Plugin -->

    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<!-- <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!-- <script src="js/jquery.validate.js"></script> -->
    </head>

  <body>
    <!-- Navigation Bar -->
   <div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-fixed-top">
  <a class="navbar-brand" href="index">User Info</a>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="home">Home</a>
    </li>
    
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
    
  </ul>
  @if(isset(Auth::user()->email))

<ul class="nav navbar-nav navbar-right">
  <li class="nav-item"><a class="nav-link" href="{{url('logout')}}"> Logout</a></li>
      
@endif
    </ul>
  
  
</nav>
    </div>
   
    </div>

</div>
 @if(isset(Auth::user()->email))
<div class="alert alert-success text-center" role="alert">

<strong> Hello {{Auth::user()->first_name}}!</strong> You are Logged In.
 
</div>
<div class="alert alert-info text-center" role="alert">
<strong>Edit</strong> your data here<br>
<strong>Note : </strong>You cannot change your password from here. Use <a href="">Reset password</a> instead
 
</div>

<form class="form-group" id="edit_user_form" method="POST"  autocomplete="off">
 <div class="row  m-5 p-5 bg-success text-white">
     <div class="col">
<div class="form-group">
  @csrf
  <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
  <input type="hidden" name="id" id="id" value="{{Auth::user()->id}}">
 <label for="fname">First Name:</label>
  <input type="text" class="form-control" id="first_name" name="first_name" value="{{Auth::user()->first_name}}" >
  <small class="text-danger bg-white form_error"></small>
</div>
<div class="form-group">
 <label for="lname">Last Name:</label>
  <!-- <input type="text" class="form-control" name="last_name" id="last_name" value="{{Auth::user()->last_name}}"> -->
<input type="text" class="form-control" name="last_name" id="last_name" value="{{Auth::user()->last_name}}" >
<small class="text-danger bg-white form_error"></small>
</div>
<div class="form-group">
 <label for="email">Email/Username:</label>
  <input type="text" class="form-control" name="email" id="email" value="{{Auth::user()->email}}">
  <small class="text-danger bg-white form_error"></small>
</div>

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="text" class="form-control" name="hpassword" id="hpassword" value="{{'**** For security, your password is hidden****'}}" readonly>
  <input type="hidden" class="form-control" name="password" id="password" value="{{Auth::user()->password}}" readonly>
</div>

  <div class="form-group">
 <label for="mobno">Mobile Number:</label>
  <input type="text" class="form-control" name="mobno" id="mobno" value="{{Auth::user()->mobno}}">
  <small class="text-danger bg-white form_error"></small>
</div>
<div class="form-group">
 <label for="dob">Date of Birth(in YYYY-MM-DD):</label>
  <input type="text" class="form-control" name="dob" id="dob" value="{{Auth::user()->DOB}}">
  <small class="text-danger bg-white form_error"></small>
</div>

<div class="form-group">
  <label for="gender">Gender:</label>
   <input type="text" class="form-control" name="gender" id="gender" value="{{Auth::user()->gender}}">
   <small class="text-danger bg-white form_error"></small>

 </div>
  <div class="form-group">
  <label for="address">Address:</label>
  <textarea class="form-control" rows="5" name="address" id="address">{{Auth::user()->address}}</textarea>
  <small class="text-danger bg-white form_error"></small>
</div>

<!-- <div class="form-group">
<label for="country">Country:</label>
 <input name="country" class="form-control" id="countrylist" value="{{Auth::user()->country}}">
</div> -->
<div class="form-group {{ $errors->has('country') ? ' has-error' : '' }}">
<label for="country">Country:</label>
 <select name="country" class="form-control" id="countrylist">
 
       <option disabled>Select Country</option>
       @foreach($countryname as $key => $country)
       <option id="countryname" value="{{$country->countryname}}" {{old('country',$country->countryname)== Auth::user()->country ?'selected' :''}}>{{$country->countryname}}</option>
        
         @endforeach
      </select>
<small class="text-danger bg-white form_error">{{$errors->first('country') }}</small>
</div>

 <div class="form-group">
 <label for="dt">Date and Time of Update:</label>
  <input type="text" class="form-control" name="dt" id="dt" value=@php date_default_timezone_set("Asia/Kolkata"); echo date("Y-m-d,H:i:s ") @endphp readonly>
</div>
<div class="form-group text-center">
<!-- <a href="{{url('recheck_form')}}"/><button type="submit" class="btn btn-primary mb-2 text-center" onclick="store_using_ajax()">Submit</button> -->
</div>
<div class="form-group text-center ">

<button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>
<!-- <a href="{{url('dashboard')}}"></a> -->
<button  class="btn btn-info" id="cancel_edit">Cancel</button>

</div>

</div>

</div>

</form>

</div>  

<!-- Cancel button -->
<script type="text/javascript">
  $(document).ready(function(){

    
    $('#cancel_edit').click(function (e){
      e.preventDefault();
      window.location="dashboard";

    });

  });


</script>



<script type="text/javascript">
    $(document).ready(function(){
      
       
  
           jQuery.validator.addMethod("nowhitespace", function(value, element) {
           return this.optional(element) || /^\S+$/i.test(value);
           }, "No white space please");

            $("#edit_user_form").validate({
       rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
                 firstname:{
                    required:true,
                    nowhitespace :true
                    },
                lastname:{

                    required:true,
                    nowhitespace :true
                    },
         
                email: {
                      required: true,
                      // Specify that email should be validated
                      // by the built-in "email" rule
                      email: true,
                      nowhitespace :true
                    },

               mobno:  {
                      required:true,
                      digits:true,
                      minlength: 10,
                      maxlength: 10,
                      nowhitespace :true
                    },
                dob:{
                    required:true,
                    date:true,
                    dateISO: true,
                    nowhitespace :true
                  },
                gender : {
                      required:true,
                      nowhitespace :true
                    },
                
                address:{

                    required:true,
                     nowhitespace :true
                     },
                country:{
                    required:true,
                    nowhitespace :true

                    },
    },

     // Specify validation error messages
      messages: {
              firstname: {
                        required:"Firstname field cannot be empty"
                     },
               lastname: {
                      required:"Lirstname field cannot be empty"
                    },
            
                email: {
                      required: "Email address cannot be blank",
                     email: "Email format should be example@examle.com or similar"
                    },
                 mobno:{
                       required:"Mobile Number cannot be empty",
                      digits:"Mobile number must contain only numbers from 0-9",
                       minlength:"Mobile number must be 10 digits long",
                       minlength:"Mobile number must be 10 digits long",

                    },
                 dob:{
                       required:"Date of Birth cannot be empty",
                       date:"The Date input must be a date",
                      dateISO: "The Date input must be of the form YYYY-MM-DD"
                   },
                  gender:{
                       required:"The gender field  cannot be empty",

                   },
                 address:{
                     required:"The address field cannot be empty"
                  },  
                  country:{
                       required:"The country field cannot be empty "
                   },

      },
          submitHandler: function(form){
                          
                                $.ajaxSetup({
                                   headers: {
                                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                      }
                                   }); //Ajaxsetup ends

                                $.ajax({
                                  type:"POST" ,
                                  url: "validate_loggedin_user_in_database" ,
                                  cache: false,
                                  processData:true,   //Required
                                  contentType: 'application/x-www-form-urlencoded',
                                   data: {

                             

                                                  '_token'             :    $("#csrf").val(),
                                                  'id'                :     $('#id').val(),
                                                  'first_name'         :    $('#first_name').val(),
                                                  'last_name'         :    $('#last_name').val(),
                                                  'email'             :    $('#email').val(),
                                                 'password'           :    $('#password').val(),
                                                  'mobno'              :    $('#mobno').val(),
                                                  'dob'                 :     $('#dob').val(),
                                                  'gender'              :     $('#gender').val(),
                                                  'address'              :       $('#address').val(),
                                                  'country'              :       $('#countrylist').val(),
                            
                         
                           },
                           dataType: 'JSON',
                                       success:function enter_data(response){
                                                     swal({
                                                       title: "Form Submitted Successfully!",
                                                       text: "Data Updated. ",
                                                       icon: "success",
                                                       button: "Redirecting....",
                                                      timer: 5000,
                                                      });
                                                      setTimeout(function(){ window.location = "dashboard";},5000);
                              
                               // console.log(response);
                               

                                                      },
                                     error: function error_in_submitting(response){
                                                      swal({
                                                          title: "Error in submitting form",
                                                          text: "Please try again later! ",
                                                          icon: "warning",
                                                          button: "Okay",
                                                        });
                                            // console.log(response);
                                  },

                              
                                }); //Ajax Submit ends
                       
                          


                      },// submithandler ends

        }); //Validate end
});//document ready end
             
 


</script>

@endif

<!-- Unauthenticated users are kicked out -->

  @if(!isset(Auth::user()->email))
 <!-- <a href="{{url('logout')}}"/> <button type="button" class="btn btn-danger btn-lg btn-block">Unauthorised user! Please login or signup before you can enter this page</button>   -->

 <script type="text/javascript">window.location="login"</script>

@endif




</body>
</html>

И я снова переписываю часть валидатора для удобства

<script type="text/javascript">
    $(document).ready(function(){
      
       
  
           jQuery.validator.addMethod("nowhitespace", function(value, element) {
           return this.optional(element) || /^\S+$/i.test(value);
           }, "No white space please");

            $("#edit_user_form").validate({
       rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
                 firstname:{
                    required:true,
                    nowhitespace :true
                    },
                lastname:{

                    required:true,
                    nowhitespace :true
                    },
         
                email: {
                      required: true,
                      // Specify that email should be validated
                      // by the built-in "email" rule
                      email: true,
                      nowhitespace :true
                    },

               mobno:  {
                      required:true,
                      digits:true,
                      minlength: 10,
                      maxlength: 10,
                      nowhitespace :true
                    },
                dob:{
                    required:true,
                    date:true,
                    dateISO: true,
                    nowhitespace :true
                  },
                gender : {
                      required:true,
                      nowhitespace :true
                    },
                
                address:{

                    required:true,
                     nowhitespace :true
                     },
                country:{
                    required:true,
                    nowhitespace :true

                    },
    },

     // Specify validation error messages
      messages: {
              firstname: {
                        required:"Firstname field cannot be empty"
                     },
               lastname: {
                      required:"Lirstname field cannot be empty"
                    },
            
                email: {
                      required: "Email address cannot be blank",
                     email: "Email format should be example@examle.com or similar"
                    },
                 mobno:{
                       required:"Mobile Number cannot be empty",
                      digits:"Mobile number must contain only numbers from 0-9",
                       minlength:"Mobile number must be 10 digits long",
                       minlength:"Mobile number must be 10 digits long",

                    },
                 dob:{
                       required:"Date of Birth cannot be empty",
                       date:"The Date input must be a date",
                      dateISO: "The Date input must be of the form YYYY-MM-DD"
                   },
                  gender:{
                       required:"The gender field  cannot be empty",

                   },
                 address:{
                     required:"The address field cannot be empty"
                  },  
                  country:{
                       required:"The country field cannot be empty "
                   },

      },
          submitHandler: function(form){
                          
                                $.ajaxSetup({
                                   headers: {
                                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                      }
                                   }); //Ajaxsetup ends

                                $.ajax({
                                  type:"POST" ,
                                  url: "validate_loggedin_user_in_database" ,
                                  cache: false,
                                  processData:true,   //Required
                                  contentType: 'application/x-www-form-urlencoded',
                                   data: {

                             

                                                  '_token'             :    $("#csrf").val(),
                                                  'id'                :     $('#id').val(),
                                                  'first_name'         :    $('#first_name').val(),
                                                  'last_name'         :    $('#last_name').val(),
                                                  'email'             :    $('#email').val(),
                                                 'password'           :    $('#password').val(),
                                                  'mobno'              :    $('#mobno').val(),
                                                  'dob'                 :     $('#dob').val(),
                                                  'gender'              :     $('#gender').val(),
                                                  'address'              :       $('#address').val(),
                                                  'country'              :       $('#countrylist').val(),
                            
                         
                           },
                           dataType: 'JSON',
                                       success:function enter_data(response){
                                                     swal({
                                                       title: "Form Submitted Successfully!",
                                                       text: "Data Updated. ",
                                                       icon: "success",
                                                       button: "Redirecting....",
                                                      timer: 5000,
                                                      });
                                                      setTimeout(function(){ window.location = "dashboard";},5000);
                              
                               // console.log(response);
                               

                                                      },
                                     error: function error_in_submitting(response){
                                                      swal({
                                                          title: "Error in submitting form",
                                                          text: "Please try again later! ",
                                                          icon: "warning",
                                                          button: "Okay",
                                                        });
                                            // console.log(response);
                                  },

                              
                                }); //Ajax Submit ends
                       
                          


                      },// submithandler ends

        }); //Validate end
});//document ready end
</script>

Чего я хочу, так это

  • ошибки должны появиться под соответствующими полями сразу после того, как пользователь покинет это поле ввода и перейдет на другое
  • поля ввода должны светиться красным цветом

Какая-нибудь помощь, пожалуйста?

Кроме того, как я могу проверить, принято ли электронное письмо, и показать пользователю сообщение об ошибке для этого?

У вопроса есть решение - Посмотреть?

Ответы - "Аякс" представить успешного, но валидатор jQuery не форме проверить / Ajax submit successful, but jQuery validator does not validate form

Является ответом!
Khalid Khan

08.10.2020 12:47:33

Вы можете сделать это для достижения ваших требований.

Сначала отправьте свою форму явно по нажатию кнопки редактирования и проверьте ее на валидацию. Замените весь код script следующим кодом

<script type="text/javascript">
    $(document).ready(function(){

        jQuery.validator.addMethod("nowhitespace", function(value, element) {
        return this.optional(element) || /^\S+$/i.test(value);
        }, "No white space please");

        var validator = $("#edit_user_form").validate({
            rules: {
                
                firstname:{
                    required:true,
                    nowhitespace :true
                },

                lastname:{
                    required:true,
                    nowhitespace :true
                },
         
                email: {
                    required: true,
                    email: true,
                    nowhitespace :true
                },

                mobno:{
                    required:true,
                    digits:true,
                    minlength: 10,
                    maxlength: 10,
                    nowhitespace :true
                },

                dob:{
                    required:true,
                    date:true,
                    dateISO: true,
                    nowhitespace :true
                },

                gender:{
                    required:true,
                    nowhitespace :true
                },
                
                address:{
                    required:true,
                    nowhitespace :true
                },

                country:{
                    required:true,
                    nowhitespace :true
                },
            },

            messages: {
                firstname: {
                    required:"Firstname field cannot be empty"
                },
                lastname: {
                    required:"Lirstname field cannot be empty"
                },
                email: {
                    required: "Email address cannot be blank",
                    email: "Email format should be example@examle.com or similar"
                },
                mobno:{
                    required:"Mobile Number cannot be empty",
                    digits:"Mobile number must contain only numbers from 0-9",
                    minlength:"Mobile number must be 10 digits long",
                    minlength:"Mobile number must be 10 digits long",
                },
                dob:{
                    required:"Date of Birth cannot be empty",
                    date:"The Date input must be a date",
                    dateISO: "The Date input must be of the form YYYY-MM-DD"
                },
                gender:{
                    required:"The gender field  cannot be empty",
                },
                address:{
                    required:"The address field cannot be empty"
                },  
                country:{
                    required:"The country field cannot be empty "
                },
            },
            errorPlacement: function (error, element) {
                element.each(function () {
                    $(this).next("div .error").html(error);
                });
            },
        });


        // AJAX PART

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).on('click','#edit_user_button',function(e){
            e.preventDefault();
            if($("#edit_user_form").valid()){
                $.ajax({
                    type:"POST" ,
                    url: "validate_loggedin_user_in_database" ,
                    cache: false,
                    processData:true,   //Required
                    contentType: 'application/x-www-form-urlencoded',
                    data: {
                        '_token'             :    $("#csrf").val(),
                        'id'                :     $('#id').val(),
                        'first_name'         :    $('#first_name').val(),
                        'last_name'         :    $('#last_name').val(),
                        'email'             :    $('#email').val(),
                        'password'           :    $('#password').val(),
                        'mobno'              :    $('#mobno').val(),
                        'dob'                 :     $('#dob').val(),
                        'gender'              :     $('#gender').val(),
                        'address'              :       $('#address').val(),
                        'country'              :       $('#countrylist').val(),
                    },
                    dataType: 'JSON',
                    success:function enter_data(response){
                        swal({
                            title: "Form Submitted Successfully!",
                            text: "Data Updated. ",
                            icon: "success",
                            button: "Redirecting....",
                            timer: 5000,
                        });
                        setTimeout(function(){ window.location = "dashboard";},5000);
                    },
                    error: function error_in_submitting(response){
                        swal({
                            title: "Error in submitting form",
                            text: "Please try again later! ",
                            icon: "warning",
                            button: "Okay",
                        });
                    },
                }); //Ajax Submit ends
            }
        });
    });

</script>

И создайте пустой div с классом ошибок перед закрытием каждой входной группы, как это

<div class="form-group">
  <label for="address">Address:</label>
  <textarea class="form-control" rows="5" name="address" id="address">{{Auth::user()->address}}</textarea>
  <small class="text-danger bg-white form_error"></small>
  <div class="error"></div> // This Line needs to be added in every form-group
</div>

И, наконец, добавьте css, чтобы получить красную границу на ошибках, подобных этому

.error{
   color:red;
}

Дайте мне знать, если у вас возникнут какие-либо проблемы

Помочь в развитии проекта:
Закрыть X