<form>
<div class="form-group">
                <label for="add-price">Price <span class="glyphicon glyphicon-euro"></span></label>
                 <input type="number" class="form-control" id="add-price" value="0" step="any" min="0" name="number" onfocusout="check(this)" v-model="product.std_rte"/>
</div>
<button type="submit" class="btn btn-primary" @click.prevent="createProduct">Create</button>
</form>

выше HTML-код для вопроса и нисходящий javascript, необходимый для проверки.

function check(input) {
            if (input.value == 0 || input.value == "") {
                // input.setCustomValidity('The number must not be zero or empty.');
                alert("The number must not be zero or empty.");
                return false;
            } else {
                input.setCustomValidity('');
            }
            return true;
            }

код выполняется для проверки входного текста, но после того, как я нажимаю кнопку «Сохранить», он позволяет сохранить значение, когда значение равно нулю и пусто, что позволяет. Я хочу перехватить форму, пока значение не будет правильно задано в соответствии с проверкой и он должен позволять отправлять форму только тогда, когда она верна.

1
Ajharali

4 ответа

Что вы делаете неправильно, так это то, что вы сначала проверяете поле ввода на предмет неправильного ввода, а затем отправляется форма, которая содержит форму для отправки. Проверка проверяется перед отправкой формы.

Что вам нужно сделать, это проверить поле на кнопке, чтобы при каждом нажатии кнопки отправки формы она сначала проверяла поле перед отправкой, а когда значение проходит проверку, вы можете отправить форму через javascript.

Я изменил код для HTML как:

<form id="form">
    <div class="form-group">
                    <label for="add-price">Price <span class="glyphicon glyphicon-euro"></span></label>
                     <input type="number" class="form-control" id="add-price" value="0" step="any" min="0" name="number" v-model="product.std_rte"/>
    </div>
    <button type="submit" class="btn btn-primary" onclick="check(event)">Create</button>
    </form>

и функция JavaScript как

    function check(input) {
        var price = document.querySelector('#add-price').value;
        debugger;
        input.preventDefault();
        if (price == 0 || price == "") {
            // input.setCustomValidity('The number must not be zero or empty.');
            alert("The number must not be zero or empty.");
            return false;
        } else {
            input.setCustomValidity('');
        }
        document.querySelector('#form').submit();

        return true;
        }

Надеюсь, это поможет.

это также может помочь мне добавить;

          onfocusout="check(this);" 


         function check(input) {
         console.log(typeof input.value); //might be possible that the check func is 
                                         //fine but not the data
         console.log(input.value);      //so lets have a look  
         var chk=true;
         try{
         if (typeof input.value === "undefined" ){ chk=false;}; //shouldn be but...
         if (input.value === 0 ){ chk=false;}; // more secure with type checking
         if (input.value === "" ){ chk=false;};
         if (parseInt(input.value) === 0 ){ chk=false;};  //if it is "0" - a string             
         } catch(ex) {
         chk=false;  
         console.log(ex);// just to learn more
         } 
         if (chk===false){  
            // input.setCustomValidity('The number must not be zero or empty.');
            alert("The number must not be zero or empty.");
            return false;
        } else {
            input.setCustomValidity('');
        }
        return true;
        }

Функция проверки вызывается из onfocusout в поле ввода, но это не может предотвратить отправку. Вместо этого вы должны вызвать его из onsubmit = "" на кнопке отправки.

Я думаю, что-то не так с этой строкой:

<input type="number" class="form-control" id="add-price" value="0" step="any" min="0" name="number" onfocusout="check(this)" v-model="product.std_rte"/>

Вы использовали onfocusout, поэтому он разрешает нулевые значения после отправки. Измените его на событие onclick, а затем посмотрите разницу.

Надеюсь это поможет.

58557612