如果任何一个字段为空或未使用 javascript 正确填写，则不应提交表单

Question

<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;
}

代码正在运行以进行输入文本验证，但是在我单击保存按钮后，它允许保存值，当值为零并且为空时它允许它。我想捕获表单，直到正确给出值根据验证，它应该只允许提交正确的表单。

Answer 1

我认为这行有问题：

<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事件，然后看看区别。

希望这会有所帮助。

Answer 2

您做错了什么是您首先检查输入字段是否有错误输入，然后提交表单，该表单是要提交的表单。在表单提交之前检查验证。

您需要做的是验证按钮上的字段，这样当点击表单提交按钮时，它会在提交前首先检查字段，当值通过验证时，您可以通过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;
        }

希望对你有帮助。

Answer 3

       function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }

       function check(input) {
        var priceErr = true;
        var bt = document.getElementById("btsubmit");
        if (input.value <= 0 || input.value ==="") {
            bt.disabled = true;
            printError("priceErr", "Please enter valid price");
            return false;
        } else {
            bt.disabled = false;
            priceErr = false;
            printError("priceErr", "");
        }
        return true;
        }

以及相应的 Html 代码

<input type="number" class="form-control" id="add-price" onkeyup="check(this)" v-model="product.std_rte" required/>
<div class="error" id="priceErr"></div>

<input class="form-control" id="add-itemgrp1hd" v-model="product.itemgrp1hd"required/>
<div class="error"><p>*Mandatory<p></div>

<input class="form-control" id="add-name" v-model="product.itemfullhd" required/>
<div class="error"><p>*Mandatory<p></div>

<input type="file" id="edit-imagemain" v-model="product.Image_file" @change="onFileChanged" required/>
<div class="error"><p>*Mandatory<p></div>

感谢所有回答我问题的人，这对我了解实际缺少什么非常有帮助。这是对我来说很好的答案

Answer 4

检查功能是从输入框的 onfocusout 调用的，但这不能阻止提交。相反，您应该从提交按钮上的 onsubmit="" 调用它。

Answer 5

这也可能有助于我添加一个；

          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;
        }