2016-01-21 122 views
0

好吧,我做了一个形式验证,好吧,当我要连接在laravel验证我用这种方式表单验证laravel

这是页面控制器

public function getContact(){ 

     self::$data['title'] = 'Contact us'; 
     return view('content.contact',self::$data); 
    } 

    public function postContact(test $request){  

    } 


} 

这是路线:

Route::get('contact','[email protected]'); 
Route::post('contact', '[email protected]'); 

,这是形式

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script type="text/javascript" href="{{asset('js/class.FormValidation.js')}}"></script> 
    <script type="text/javascript" href="{{asset('js/landin_validation.js')}}"></script> 
    <link rel="stylesheet" type="text/css" href="{{asset ('js/style.css')}}"/> 
    </head> 
    <body> 

      <form action="" method="post" class="landing-form">  
       {!! csrf_field() !!} 
      <label>Fill your details here - </label><br/><br/> 
      <input placeholder="Full name:" type="text" name="name" class="field-name" /> 
      <input placeholder="Email:" type="text" name="email" class="field-email" /> 
      <input placeholder="Phone Number:" type="text" name="phone" class="field-phone" /> 
      <input type="submit" name="submit" value="Send" /> 

好了,所以,我尝试了很多的验证与形式的连接,但因为它是laravel所以我知道请求的方式,但我尝试了很多把它与该验证,但不工作连接,

这是landin_validation。 JS

var formValidate = new FormValidation(); 

$(document).ready(function() { 

    $('form.landing-form').submit(function() { 

    // Collect client info from fields 
    var name = $.trim($('input[type="text"].field-name').val()); 
    var email = $.trim($('input[type="text"].field-email').val()); 
    var phone = $.trim($('input[type="text"].field-phone').val()); 

    // Reset input fields error class 
    $('input[type="text"]').removeClass('error'); 

    // Form validation 
    if (!formValidate.testName(name)) { 
     $('input[type="text"].field-name').addClass('error'); 
     $('input[type="text"].field-name').val(''); 
     $('input[type="text"].field-name').attr('placeholder', '* Valid full name is required!'); 
    } else if (!formValidate.testEmail(email)) { 
     $('input[type="text"].field-email').addClass('error'); 
     $('input[type="text"].field-email').val(''); 
     $('input[type="text"].field-email').attr('placeholder', '* Valid email is required!'); 
    } else if (!formValidate.testPhone(phone)) { 
     $('input[type="text"].field-phone').addClass('error'); 
     $('input[type="text"].field-phone').val(''); 
     $('input[type="text"].field-phone').attr('placeholder', '* Valid phone is required!'); 
    } else { 

     // Open ajax call to save client details + send mail to customer 
     $.ajax({ 
     url: "form_handler.php", 
     type: "POST", 
     dataType: "html", 
     async: "false", 
     data: {name: name, email: email, phone: phone}, 
     beforeSend: function() { 
      var messege = '<img src="ajax-loader.gif" border="0">'; 
      messege += '&nbsp;&nbsp;Sending... '; 
      $('form.landing-form label').html(messege); 
     }, 
     success: function (response) { 

      if (response == true) { 

      setTimeout(function(){ 

       $('div.form-wrapper').html('<label>Your details has been send!</label>'); 

      }, 2000); 

      } else { 

      $('div.form-wrapper').html('<label>Something went wrong, please try again later...</label>'); 

      } 
     } 
     }); 
    } 

    // Stop form submission 
    return false; 

    }); 
}); 

这是FormValidation.js

function FormValidation(){ 

    this.nameReg = [ 
    /^([a-zA-Z\s]+){2,255}$/ 
    ]; 

    this.emailReg = [ 
    /^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/ 
    ]; 

    this.phoneReg = [ 
    /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/i, 
    /^[0-9]{3}.[0-9]{3}.[0-9]{4}$/i, 
    /^\([0-9]{3}\)-[0-9]{3}-[0-9]{4}$/i, 
    /^[0-9]{9,10}$/i 
    ]; 

    this.testName = function(nameInput){ 

    return this.inputCheck(this.nameReg, nameInput); 

    }; 

    this.testEmail = function(emailInput){ 

    return this.inputCheck(this.emailReg, emailInput); 

    }; 

    this.testPhone = function(phoneInput){ 

    return this.inputCheck(this.phoneReg, phoneInput); 

    }; 

    this.inputCheck = function(regArray, inputData){ 

    var valid = false; 

    $.each(regArray, function(key, val){ 

     if(val.test(inputData)){ 

     valid = true; 

     } 

    }); 

    return valid; 

    }; 

} 

我只是想知道的形式与此验证的联系方式。

+0

为什么不使用jquery验证。同时使用服务器和客户端验证 – shalini

+0

非常感谢.. – Fadee

回答

0

我认为这不是与js.Аccording验证表单数据给我,你应该从服务器side.If验证你想有你可以用良好的用户体验好主意,这个JavaScript LIB - http://t4t5.github.io/sweetalert/

+0

非常感谢.. – Fadee