2016-01-21 99 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