Как создать валидацию в jQuery

Question

Я изо всех сил пытаюсь создать проверку входных данных в jQuery.У меня есть бат, чтобы создать строку.Когда я нажму этот btn, вы увидите всплывающую страницу, которая содержит 2 текстовых поля и 1 выпадающий список.Я хочу проверить, не является ли это текстовое поле буксировки не пустым, тогда это собирается представить.Это мое создание btn, которое открывается всплывающим окном:

<div class="col-lg-12 panel">
    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> @Resource.Add_new_item
    </a>
</div>

И это то, что в этом всплывающем окне:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            @using (Html.BeginForm("Edit", "ApplicationDetailList", new {page = Model.PageNumber,filter.ListType, filter.PackageName }, FormMethod.Post))
            {
                @Html.AntiForgeryToken()
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">@Resource.Add_new_item </h5>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>@Resource.Application_category_tittle *</label>
                            <input name="id" id="id" class="form-control" style="direction: ltr;"/>
                            @*@Html.ValidationMessageFor(m => m[0].Id);*@
                        </div>
                        <div class="form-group">
                            <label>@Resource.List_type *</label>
                            @Html.DropDownList("listType", ApplicationDetailListType.Solr.ToSelectListItems(false, filter.ListType), new { @class = "form-control"})                           
                            @*<input name="tags" class="form-control" style="direction: ltr;"/>*@
                        </div>
                        <div class="form-group">
                            <label>@Resource.Package_name *</label>
                            <input name="packageName" class="form-control" style="direction: ltr;"id="packageName" />
                            @*@Html.ValidationMessageFor(m=>m[0].PackageName);*@
                        </div>
                        <label id="validation">

                        </label>
                        <div class="form-group">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success btn-edit-save">@Resource.Save</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@Resource.Cancel</button>
                    </div>
                </div>
            }
        </div>
    </div>

И это мой сценарий раздела, который я сделал функцию:

var edit = $("#editModal");
           // var packageName = $("#packageName").val();
            //var id = $("#id").val();
            //packageName.length > 0 && id.length > 0 ?
                 $(".btn-edit-save").click(function() {
                    $("form", edit).submit();
                });

проблема здесь:

 $(".btn-edit-save").click(function() {
                    $("form", edit).submit();
                });

Я не хочу отправлять, если входные данные пусты и просто показывают сообщение, что они пусты.Большое спасибо

Answer 1

Вы можете добавить текстовое поле ошибки ошибки метки и поля ошибки границы как

$(".btn-edit-save").click(function() {
     var title = $('#id').val();
     var packageName = $('#packageName').val();
     var isValid = true;
     if(title == ""){
        $('#id').after("<label class='error'>Title is required</label>");
        $('#id').css('border', '1px solid red');
        isValid = false;
     }
     if(packageName == ""){
        $('#packageName').after("<label class='error'>PackageName is required</label>");
        $('#packageName').css('border', '1px solid red');
        isValid = false;
     }
     if(isValid){
        //submit form
        //$("form", edit).submit();
     }
});

$(".btn-edit-save").click(function() {
     var title = $('#id').val();
     var packageName = $('#packageName').val();
     var isValid = true;
     if(title == ""){
        $('#id').after("<label class='error'>Title is required</label>");
        $('#id').css('border', '1px solid red');
        isValid = false;
     }
     if(packageName == ""){
        $('#packageName').after("<label class='error'>PackageName is required</label>");
        $('#packageName').css('border', '1px solid red');
        isValid = false;
     }
     if(isValid){
        //submit form
        //$("form", edit).submit();
     }
});

.error{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addModalLabel">@Resource.Add_new_item </h5>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>@Resource.Application_category_tittle *</label>
                            <input name="id" id="id" class="form-control" style="direction: ltr;"/>
                            
                        </div>
                      
                        <div class="form-group">
                            <label>@Resource.Package_name *</label>
                            <input name="packageName" class="form-control" style="direction: ltr;"id="packageName" />
                            
                        </div>
                        <label id="validation">

                        </label>
                        <div class="form-group">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success btn-edit-save">@Resource.Save</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@Resource.Cancel</button>
                    </div>
                </div>

Answer 2

Если вы не хотите отправлять, если входные данные пусты, вы можете использовать Ajax.Beginform вместо Html.Beginform. Вы можете определить функцию javascript и запустить ее перед отправкой с атрибутом Ajax.BeginForm OnBegin.

Но вы также должны добавить ссылку на jquery.unobtrusive-ajax.min.js.

<html>
<head>
    <script src="/Scripts/jquery-[yourVersion].min.js" type="text/javascript"></script>
    <script src="/Scripts/jquer.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function YourValidationFunc() {
            //add your validation code
            return true;
        }
    </script>
</head>
<body>
    <div>
        @using (Ajax.BeginForm("Edit", "ApplicationDetailList", new AjaxOptions
            {
                HttpMethod = "POST",
                OnBegin = "return YourValidationFunc();"
            }, new { page = Model.PageNumber,filter.ListType, filter.PackageName }))
        {
            @Html.AntiForgeryToken()
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">@Resource.Add_new_item </h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>@Resource.Application_category_tittle *</label>
                        <input name="id" id="id" class="form-control" style="direction: ltr;"/>
                        @*@Html.ValidationMessageFor(m => m[0].Id);*@
                    </div>
                    <div class="form-group">
                        <label>@Resource.List_type *</label>
                        @Html.DropDownList("listType", ApplicationDetailListType.Solr.ToSelectListItems(false, filter.ListType), new { @class = "form-control"})                           
                        @*<input name="tags" class="form-control" style="direction: ltr;"/>*@
                    </div>
                    <div class="form-group">
                        <label>@Resource.Package_name *</label>
                        <input name="packageName" class="form-control" style="direction: ltr;"id="packageName" />
                        @*@Html.ValidationMessageFor(m=>m[0].PackageName);*@
                    </div>
                    <label id="validation">

                    </label>
                    <div class="form-group">
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" name="Submit" class="btn btn-success btn-edit-save" value="@Resource.Save" />
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Resource.Cancel</button>
                </div>
            </div>
        }
    </div>
</body>
</html>

В приведенном выше примере OnBegin будет запускаться с помощью:

<input type="submit" name="Submit" class="btn btn-success btn-edit-save" value="@Resource.Save" />

Answer 3

$. Метод submit в Jquery отправляет форму.

Прежде чем вызывать метод submit, необходимо проверить

$(".btn-edit-save").click(function() {
             if(validate(fname)==true)
               {
                 $("form", edit).submit();
                }
               else alert("empty fname");
            });

Answer 4

Вы можете добавить атрибут 'required' к элементам ввода, как показано ниже

  <input type="text" required name="anyName" />

если явно, что вы хотите проверить, то проверьте по селектору. $ ("# Selectorname"). Val () // даст вам значение, если оно есть