Не работает скрипт jquery.Что я делаю не так?

450

24 ноября 2016, 10:04

Здравствуйте, пытаюсь сделать обработку формы с помощью jquery.Проект делается на laravel 5.3.Скрипт должен проверять форму на количество символов и если их меньше 3-х - оповещать об этом пользователя и останавливать запрос,ничего не добавляя в базу данных.Плюс при отправки данных страница не должна перезагружаться. Код такой: newcategory.blade.php

@extends('layouts.app')
@section('content')
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .center {
            text-align: center;
        }
    </style>
    <!--<script src="public/js/jquery-3.1.1.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $.(document).ready(function () {
            $("#send").click(function () {
                $('#messageShow').hide();
                var title = $("#title").val();
                var fail="";
                if (title.length < 3) fail="Название категории должно состоять из 3-х и более символов";
                if (fail!=""){
                    $('#messageShow').html(fail + "<div class='clear'><br></div>")
                    $('#messageShow').show();
                    return false;
                }
                $.ajax({
                    url: '/newcategory',
                    type:'POST',
                    data:{'title': title},
                    cache:false,
                    success: function (response) {
                        var messageResp = new Array('Комментарий успешно добавлен','Комментарий не добавлен,ошибка','Заполните форму');
                        var resultStat = messageResp[Number(response)];
                        if(response == 0){
                            $("#title").val("");
                        }
                        $("#messageShow").text(resultStat).show().delay(1500).fadeOut(800);
                    }
                })
            })
        })
    </script>

</head>
<body>
<div class="center">
<form method="POST" enctype="multipart/form-data">
    {{ csrf_field() }}
    <input type="text" name="title" id="title" placeholder="Добавить категорию">
    <input type="submit" class="btn-primary" value="Добавить" id="send"> <div id="messageShow"></div>
</form>
</div>
</body>
</html>
@endsection

CategoriesController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Categories;
use Illuminate\Support\Facades\Input;
use Validator;
class CategoriesController extends Controller
{
    public function store(){
        $input = Input::all();
        $rules = array(
            'title' => 'required',
        );
        $validator = Validator::make($input,$rules);
        if($validator->fails()) {
            return $validator->errors();
        }
        if($validator->passes()) {
            $newcategory = new Categories;
            $newcategory->title=Input::get('title');
            $newcategory->save();
            return view('post.newcategory');
        }
    }
    public function index(){
        return view('post.newcategory');
    }
}

routes/web.php

Route::get('newcategory', 'CategoriesController@index');
Route::post('newcategory','CategoriesController@store');

При использовании данного кода данные формы беспрепятственно отправляются и сохраняются в базе данных,даже если введенных символов в форме менее 3-х. Подскажите пожалуйста,что я делаю не так?Заранее спасибо.

Answer 1

По поводу ошибки, у Вас лишняя точка в начале после знака $. Этот знак означает функцию jQuery, в которую мы передаем аргументы, в данном случае document. Кроме того, чтобы остановить отправку формы до проверки, нужно остановить действие браузера по умолчанию, воспользовавшись event.preventDefault().

Ваш код должен начинаться так

    $(document).ready(function () {
                $("#send").click(function (ev) {
                  ev.preventDefault();
                  var title = $("#title").val();
                  var fail="";
                  ...

и лучше бы повесить вашу функцию на событие submit самой формы, которое может происходить и просто при нажатии Enter, если пользователь находится в форме. Добавьте Id для формы и обрабатывайте событие отправки на ней

         $(document).ready(function () {
                $("#sendForm").submit(function (ev) {
                  ev.preventDefault();
                  var title = $("#title").val();
                  var fail="";
                  ...

Answer 2

Для того чтобы можно было отправить форму нужен csrf-token. Он у вас есть в форме но вы его не отправляете. Присвойте форме id="send-form" событие напишите на ('#send-form').submit(), а данные в ajax отправляйте через data: ('#send-form').serialize(), чтобы отправлять все поля из формы сразу.