使用Javascript进行Laravel表单验证

时间:2017-11-01 17:22:21

标签: javascript php laravel

我是一名试图验证我的" Laravel形式的乞丐"使用一些Javascript,但我不知道我的错误。 我认为这个问题是Laravel形式的,现在我明白为什么人们会说这样的东西应该没有框架来编写。

这是我的Js(_javascriptValidation.blade.php):

<script>
function validate(){
var first_name = document.forms.["form1"]["first_name"].value;
var last_name = document.forms.["form1"]["last_name"].value;
var username =  document.forms.["form1"]["username"].value;
var maxlength = 30;

    if(first_name.length > maxlength)
    {
        document.getElementById("p_error1").innerHTML = "Your first name 
must contain less than " + maxlength + " letters!";
            return false;
    }
    else-if(last_name.length > maxlength)
    {
        document.getElementById("p_error2").innerHTML = "Your last name must 
contain less than " + maxlength + " letters!";
            return false;
    }
    else-if(username.length > maxlength)
    {
        document.GetElementById("p_error3").innertHTML = "Your username must 
contain less than "     + maxlength + " letters!";
            return false;
    }
    else{
        return true;
    }
}


</script>

这是我的&#34; Laravel表格&#34;:

@include('partials/_javascriptValidation')
<div class="col-md-18 cold-md-offset-2">
         {!! Form::open(['route' => 'DataInsert',  'onsubmit' => 'return 
validate()', 'name' => 'form1']) !!}

            {{ Form::label('first_name', 'First Name:') }}
            {{ Form::text('first_name', NULL, ['class' => 'form-control',
                                              'placeholder' => 'Elon',
                                              'id' => 'first_name']) }}
              <p id="p_error1"> </p>


            {{ Form::label('last_name', 'Last Name:') }}
            {{ Form::text('last_name', NULL, ['class' => 'form-control',
                                              'placeholder' => 'Musk',
                                              'id' => 'last_name']) }}
              <p id="p_error2"> </p>

            {{ Form::label('username', 'Username:')}}
            {{ Form::text('username', NULL, ['class' => 'form-control',
                                            'placeholder' => 'TeslaLover75',
                                            'id' => 'username']) }}
              <p id="p_error3"> </p>

            {{ Form::submit('Submit', ['class' => 'btn btn-success btn-lg 
btn-block', 
                                      'style' => 'margin-top:20px;']) }}

         {!! Form::close() !!}

        </div>

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

所以在继续之前你可能想验证你的javascript是否正确。单独看看JS:

这些还有额外的。在他们中间;

var first_name = document.forms.["form1"]["first_name"].value;
var last_name = document.forms.["form1"]["last_name"].value;
var username =  document.forms.["form1"]["username"].value;

应该写成

var first_name = document.forms["form1"]["first_name"].value;
var last_name = document.forms["form1"]["last_name"].value;
var username =  document.forms["form1"]["username"].value;

另外 else-if错误应该是else if

将来你应该在表单构建器中包含generate html(没有人知道你选择了哪个库),以及你收到的任何错误消息