Javascript 使用JS确定是否已正确填写所有表单字段_Javascript_Html_Input

Javascript 使用JS确定是否已正确填写所有表单字段

javascript html input

Javascript 使用JS确定是否已正确填写所有表单字段,javascript,html,input,Javascript,Html,Input,*编辑：修复了所有输入现在都在一个表单上验证的问题。但是，我只能添加一个变量来检查是否为空，一旦添加更多变量，提交函数就无法工作。我已经尝试了很多事情 function validateForm() { var inputVelocity = document.getElementById("dzCalculator").inputVelocity.value; var inputYellowPhase = document.getElementById("

*编辑：修复了所有输入现在都在一个表单上验证的问题。但是，我只能添加一个变量来检查是否为空，一旦添加更多变量，提交函数就无法工作。我已经尝试了很多事情

function validateForm() {
  var inputVelocity = document.getElementById("dzCalculator").inputVelocity.value;
  var inputYellowPhase = document.getElementById("dzCalculator").inputYellowPhase.value;
  var inputRedPhase = document.getElementById("dzCalculator").inputInterPhase.value;
  var inputReactionTime = document.getElementById("dzCalculator").inputReactionTime.value;
  if(inputVelocity === "" && inputYellowPhase === "" && inputRedPhase === "" && inputReactionTime === ""){
    alert("Input all fields to calculate.");
    return false;
  }
}

我已经检查了HTML匹配项-确实如此。但是我发现我不能使用onsubmit=“return validateForm”，因为这根本不起作用

这只是表格中的4个数值，共有7个数值。但当我能让这四个工作时，我就能让它们都工作

我如何使用JS来确保没有输入留空或为空？我已经做了，所以它只接受数字和小数点。因此，任何人都不能添加错误的字段。但目前，他们可以将一个字段留空，这意味着我的计算器会生成一个NaN响应

此外，如何确保我的一个字段不能接受大于1或小于0的数字。我在输入标记中尝试了min=“0”max=“1”，但因为我已删除微调器，所以这不起作用

因此，总而言之，我希望确保在单击按钮时，所有表单部分都已填写，并且其中一个字段不接受大于1或小于零的数字。

有两个选项可供选择

您可以使用querySelector选择所有输入（表单标记内），并通过循环检查每个输入的值

使用此技巧选择器获取所有无效输入

document.querySelectorAll（'input:not（[value]）：not（[value=”“]））
用更精确的选择器替换输入

能否请您详细说明您的表单在多个位置的使用情况
对于输入，我认为您需要使用step
属性
参考：
取决于您希望何时验证表单字段
例如：提交时的表单验证

函数validateForm（）{
var x=document.forms[“myForm”][“fname”].value；
如果（x==“”）{
警告（“必须填写姓名”）；
返回false；
}
}

姓名：
这对我很有用。你可以使用它，无论你想要与否，都可以设计它的样式。您确实需要JQuery。它有强大的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    
    body{
        font-size: 12px;
    }

    .main-container{
        display: flex;    /* DO NOT CHANGE */
        height: 100vh;    /* DO NOT CHANGE */
        width: 100%;      /* DO NOT CHANGE */
    }

    .c-message{
        display: flex;    /* DO NOT CHANGE */
        position: fixed;  /* DO NOT CHANGE */
        top: 0px;         /* DO NOT CHANGE */
        left: 0px;        /* DO NOT CHANGE */
        width: 100%;      /* DO NOT CHANGE */
        height: 100%;     /* DO NOT CHANGE */
    }

    .c-msgbox{
        padding: 30px;
        text-align: center;
        margin: auto; /* DO NOT CHANGE */
        background-color: #e4e4e4;
        border-radius: 4px;
        border: 1px solid #adadad;
        -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
        -moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
    }

    .standerd-button2{
        border: none;
        font-family: arial,helvetica,clean,sans-serif;
        font-size: 10px;
        font-weight: 600;
        color: white;
        background: #1A709F;
        padding: 3px;
        text-align: center;
        vertical-align: middle;
        -webkit-border-radius: 3px;
        width: max-content;
        min-width: 50px;
        margin: 2px;
    }

    .standerd-button2:hover{
        background: crimson;
        cursor: default;
    }

    .f-table {
        display: table;
        width: max-content;
        padding: 5px;
        border-spacing: 2px;
    }

    .f-tablerow {
        display: table-row;
    }    

    .f-tablecell{
        display: table-cell;
    }    

    .label-cell-r{
        text-align: right;
    }
    
    .dd-required{
        margin: auto;
        color: red;
    } 

    input, select{
        border: 1px solid lightgrey;
    }   


</style>
<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<div class="main-container">
    <div>
        <form id="f1" name="f1">
            <div class="f-table">
                <div class="f-tablerow">
                    <div class="f-tablecell label-cell-r">
                        <label for="firstname">First Name</label>
                    </div>
                    <div class="f-tablecell input-cell">
                        <input id="firstname" name="firstname" type="text" data-er="First Name"/>
                        <span class='dd-required'>*</span>
                    </div>
                </div>
                <div class="f-tablerow">
                    <div class="f-tablecell label-cell-r">
                        <label for="lastname">Last Name</label>
                    </div>
                    <div class="f-tablecell input-cell">
                        <input id="lastname" name="lastname" type="text" data-er="Last Name"/>
                        <span class='dd-required'>*</span>
                    </div>
                </div>
                <div class="f-tablerow">
                    <div class="f-tablecell label-cell-r">
                        <label for="company">Company</label>
                     </div>
                    <div class="f-tablecell input-cell">
                        <select id="company" name="company" data-er="Company Name">
                            <option value="0"> - Select Comapny - </option>
                            <option value="1">Company 1</option>
                            <option value="2">Company 2</option>
                            <option value="3">Company 3</option>
                            <option value="4">Company 4</option>
                        </select>
                        <span class='dd-required'>*</span>
                    </div>
                </div>            
            </div>
            <input id="b1" type="submit" value="Submit" />
        </form>
    </div>
<div>
<script type="text/javascript">

    $.fn.CustomAlert = function (options, callback) {
        var settings = $.extend({
            message: null,
            detail: null,
            yesno: false,
            okaytext: null,
            yestext: null,
            notext: null
        }, options);

        var frm = "";
        detail = "<b>" + settings.detail + "</b>";
        message = "<b>" + settings.message + "</b>";
        if (settings.detail === null) {
            detail = "";
        };

        frm = frm + message + "<div style='text-align: left; margin-top: 15px; margin-bottom: 15px;'>" + detail + "</div>";

        if (settings.yesno === false) {
            frm = frm + "<input id='ok' type='button' value='" + settings.okaytext + "' class='standerd-button2' />";
        } else {
            frm = frm + "<div><input id='yes' type='button' value='" + settings.yestext + "' name='yes' class='standerd-button2' />" +
                        "<input id='no' type='button' value='" + settings.notext + "' name='no' class='standerd-button2' /></div>";
        };

        var frmesg = "<div id='cmessage' name='cmessage' class='c-message'>" +
                     "<div class='c-msgbox'>" +
                     "<form>" + frm + "</form>" +
                     "</div>" +
                     "</div>";

        $(".main-container").append(frmesg);

        if (!settings.yesno) {
            $("#cmessage #ok").click(function () {
                $("#cmessage").remove();
                callback(false);
            });
        } else {
            $("#cmessage #yes").click(function () {
                $("#cmessage").remove();
                callback(true);
            });
            $("#cmessage #no").click(function () {
                $("#cmessage").remove();
                callback(false);
            });
        };
    };

    $.fn.JsFormCheck = function () {
        var MessData = "";
        this.find('select, input').each(function () {
            if ($(this).attr("data-er")) {
                m = $(this).attr("data-er");
                switch ($(this).get(0).tagName) {
                    case "INPUT":
                        if ($(this).val().length === 0) {
                            MessData = MessData + "- " + m + "<br>";
                            $(this).css('border-bottom', '2px solid green');
                        };
                        break;
                    case "SELECT":
                        if ($(this).val() === "0") {
                            MessData = MessData + "- " + m + "<br>";
                            $(this).css('border-bottom', '2px solid green');
                        };
                        break;
                };
            };
        });

        if (MessData.length > 0) {
            MessData = "<b>" + MessData + "</b>";
            x = $().CustomAlert({message: "<b>Please fill in the following required fields to continue.</b>",
                               detail: MessData,
                               okaytext: "Close",
                               yesno: false});
            return true;
        } else {
            return false;
        };
    };

    $('#f1 #b1').click(function(event){
        event.preventDefault();
        Error = $("#f1").JsFormCheck();    
        if(Error === false){
            null;
            //Do Something
        };  
    });
</script>
</body> 


身体{
字体大小：12px；
}
.主货柜{
显示：flex；/*不更改*/
高度：100vh；/*请勿更改*/
宽度：100%；/*不更改*/
}
c-信息{
显示：flex；/*不更改*/
位置：固定；/*不改变*/
顶部：0px；/*请勿更改*/
左：0px；/*请勿更改*/
宽度：100%；/*不更改*/
高度：100%；/*请勿更改*/
}
.c-msgbox{
填充：30px；
文本对齐：居中；
页边距：自动；/*不更改*/
背景色：#e4；
边界半径：4px；
边框：1px实心#adadad；
-webkit盒阴影：0px 0px 50px rgba（0,0,0,0.60）；
-moz盒阴影：0px 0px 50px rgba（0,0,0,0.60）；
盒子阴影：0px 0px 20px rgba（0,0,0,0.40）；
}
.标准按钮2{
边界：无；
字体系列：arial，helvetica，clean，无衬线；
字体大小：10px；
字号：600；
颜色：白色；
背景：#1A709F；
填充：3倍；
文本对齐：居中；
垂直对齐：中间对齐；
-webkit边界半径：3px；
宽度：最大含量；
最小宽度：50px；
保证金：2倍；
}
.标准按钮2：悬停{
背景：深红色；
游标：默认值；
}
.f-table{
显示：表格；
宽度：最大含量；
填充物：5px；
边界间距：2px；
}
.f-tablerow{
显示：表格行；
}    
.f-表细胞{
显示：表格单元格；
}    
.label-cell-r{
文本对齐：右对齐；
}
.dd必需{
保证金：自动；
颜色：红色；
} 
输入，选择{
边框：1px纯色浅灰色；
}   
名字
*
姓
*
单位
-选择Comapny-
第一公司
公司2
公司3
公司4
*
$.fn.CustomAlert=函数（选项，回调）{
变量设置=$.extend({
消息：空，
详细信息：空，
是的，错，
okaytext:null，
yestext:null，
notext:null
}，选项）；
var frm=“”；
detail=“”+设置。detail+”；
message=“”+设置。message+”；
如果（settings.detail==null）{
细节=”；
};
frm=frm+消息+“”+详细信息+“”；
如果（settings.yesno==false）{
frm=frm+“”；
}否则{
frm=frm+“”+
"";
};
var frmesg=“”+
"" +
“”+frm+“”+
"" +
"";
$（“.main container”）.append（frmesg）；
如果（！settings.yesno）{
$（“#cmessage#ok”）。单击（函数（）{
$（“#cmessage”）.remove（）；
回调（假）；
});
}埃尔斯