Как передать функцию внутри готового события после отправки формы - PullRequest
Новая
       9

Как передать функцию внутри готового события после отправки формы

0 голосов
/ 26 июня 2018

Я пытаюсь выяснить, как отправить форму или нет, в зависимости от того, верны ли входные данные или нет. Поскольку у меня довольно много условий, я хотел сделать их функциями, но эта штука не работает так, как я ее использую.

без функции (работает): https://jsfiddle.net/ba6xjm8d/3/

$(function() {

    $("#Submit").click(function() {
      // validate and process form here

      var name = $("#Name").val();
        if (name == "") {
        return false;
      }

      var surname = $("#Surname").val();
        if (surname == "") {
        return false;
      }   
    });
});

с функцией (не работает) https://jsfiddle.net/9tq23b7g/1/

function isEmpty(elemInput){
      var elem = $(elemInput).val();
        if (elem == "") {
        return false;
      }
}

$(function() {

    $("#Submit").click(function() {
      // validate and process form here

      isEmpty("#Name");
      /*var name = $("#Name").val();
        if (name == "") {
        return false;
      }*/

      var surname = $("#Surname").val();
        if (surname == "") {
        return false;
      }   
    });
});

Может кто-нибудь объяснить, как правильно написать этот фрагмент кода, который не работает (чтобы я знал, как использовать функции), и, пожалуйста, объясните мне, почему он не работает.

Спасибо!

EDIT

В основном все работает, если я запускаю его в консоли по частям, но когда я вызываю его изнутри, готовая форма щелчка отправляет сообщение независимо от того, возвращается ли ложный параметр. Как будто это вообще не признается.

Это целый кусок кода: 

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Form</title>

    <!-- CSS links -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- 1. Start Main Header -->
    <header class="main-header" id="mainHeader">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h1>Form</h1>
                </div>
            </div>
        </div>
    </header>
    <!-- / 1. End Main Header -->
    <!-- 2. Start Main Content -->
    <main class="main-content">
        <div class="container">
            <div class="row">
                <div class="register-form col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <form method="post" action="https://www.google.com/" id="inputForm">

                        <!-- Name -->
                        <div class="form-group" id="nameFormGroup">  
                            <label for="Name" class="control-label">Name</label>
                            <input type="text" name="name" class="form-control" id="Name" placeholder="Name" autofocus/>
                        </div>

                        <!-- Surname -->
                        <div class="form-group" id="surnameFormGroup">   
                            <label for="Surname" class="control-label">Surname</label>
                            <input type="text" name="surname" class="form-control" id="Surname" placeholder="Surname"/ >
                        </div>

                        <!-- Submit Button -->
                        <div class="form-group"> 
                            <button type="submit" id="Submit" class="btn btn-primary">Send</button>
                        </div>    
                    </form>
                </div>
            </div>
        </div>
    </main>
    <!-- / 2. End Main Content -->

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- JavaScript Validation JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script>

    /*  */
    function printError(elemInput, elemFormGroup, msgErr){ 
        $(elemFormGroup).removeClass("has-success has-feedback");
        $(elemFormGroup).addClass("has-error has-feedback");
        $(elemInput).after('<span class="glyphicon glyphicon-remove form-control-feedback"></span>');
        $(elemInput).after('<span class="text-danger">' + msgErr +'</span>');
    }

    /*  */
    function printSuccess(elemInput, elemFormGroup){ 
        $(elemFormGroup).removeClass("has-error has-feedback");
        $(elemInput).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
        $(elemFormGroup).addClass("has-success has-feedback");
    }

    /* This function is working if I try it in console, but not in this piece of code*/
    function checkIsEmpty(elemInput, elemFormGroup){
            var something = $.trim($(elemInput).val());
            if (something == ""){
                printError($(elemInput), $(elemFormGroup), 'Input form is empty');
                alert("I have returned false");
                return false;
            } else {
                printError($(elemInput), $(elemFormGroup));             
            }           
    }

    $(document).ready(function() {
        $("#inputForm").submit(function() {

            var name = $.trim($("#Name").val());
            var surname = $.trim($("#Surname").val());

            $('.text-danger').remove();
            $('.glyphicon').remove();       

            /*name*/
            /*calling function*/
            checkIsEmpty("#Name", "#nameFormGroup");

            /* Tring to replace this piece of code as function that would be called outside ready-submit event */

            /*name*/                    
            /*
            if (name == ""){
                printError($("#Name"), $("#nameFormGroup"), 'Input form is empty');
                return false;
            } else {
                printError($("#Name"), $("#nameFormGroup"));                
            }
            */

            /*surname*/             
            if (surname == ""){
                printError($("#Surname"), $("#surnameFormGroup"), 'Input form is empty');
                return false;
            } else {
                printError($("#Surname"), $("#surnameFormGroup"));              
            }

            // return false;
        });
    });
    </script>
</body>

или вы можете проверить это здесь: https://jsfiddle.net/cz6x8on2/

1 Ответ

0 голосов
/ 28 июня 2018

Ваша проблема в том, что вы ничего не делаете с возвратом функции isEmpty. 

function isEmpty(elemInput){
      var elem = $(elemInput).val();
        if (elem == "") {
        return false;
      }
}

$(function() {

    $("#Submit").click(function() {
      // validate and process form here

      isEmpty("#Name"); // not catching result of the call

      // omitted.
    });
});

Если вы хотите запретить отправку формы в jQuery, функция обработки должна вернуть false. Это не ситуация здесь. Вы можете решить эту проблему, сохранив возвращаемый тип как переменную и вернув ее. 

$(function() {

    $("#Submit").click(function() {
      // validate and process form here

      const val = isEmpty("#Name"); // not catching result of the call
      // if name is empty then val is false  -> no submit
      if(!val) return false; // stops form submit
    });
});

PS: поведение функции противоречит названию. Я ожидаю, что он возвращает true, когда элемент ввода не заполнен. Тем не менее вы вернетесь с false. Это сбивает с толку. Пожалуйста, переименуйте функцию или верните с помощью true, если ввод пуст.

edit: потребовалось время, чтобы обновить скрипку: https://jsfiddle.net/cz6x8on2/8/

...