IOS上的HTML表单验证_Html_Forms

IOS上的HTML表单验证

html forms

IOS上的HTML表单验证,html,forms,Html,Forms,我目前正在进行一个项目，我需要连接到网络并访问本地网页。该网页允许用户输入姓名并提交。提交时进行验证，以确保所有字段都已填写。这在我的电脑浏览器上有效，但在我的IOS手机浏览器上无效。我尝试了Chrome、FireFox和Safari，但三者都没有提供验证不幸的是，我还没有弄明白为什么会发生这种情况。如果有人能向我解释一下它不起作用的原因，我将不胜感激函数validateForm（）{ var user_name=document.forms[“myForm”][“fname”].valu

我目前正在进行一个项目，我需要连接到网络并访问本地网页。该网页允许用户输入姓名并提交。提交时进行验证，以确保所有字段都已填写。这在我的电脑浏览器上有效，但在我的IOS手机浏览器上无效。我尝试了Chrome、FireFox和Safari，但三者都没有提供验证

不幸的是，我还没有弄明白为什么会发生这种情况。如果有人能向我解释一下它不起作用的原因，我将不胜感激

函数validateForm（）{
var user_name=document.forms[“myForm”][“fname”].value；
var user_name=document.forms[“myForm”][“lname”]。值；
如果（用户名=“”| |用户名=“”）{
警报（“请填写相应字段”）；
返回false；
}
}

.topcenter{
保证金：0；
位置：绝对位置；
最高：12%；
左：35%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
米德尔中心酒店{
保证金：0；
位置：绝对位置；
最高：40%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}


章鱼解
布格·邦斯马拉斯
注册：
名字：




姓氏：

适用于iOS 13.5.1 iPhone 11 Chrome和Safari

您的表单访问非常过时

我会改变

 var user_name = document.forms["myForm"]["fname"].value;
 var user_surname = document.forms["myForm"]["lname"].value;

到

看看这是否有帮助，所以经过更多的研究，甚至在同一部手机上测试，我终于发现了这个问题。问题不在于html代码，而在于它的宿主方式。我使用micropython结合sockets来创建localhost，出于某种原因，它不喜欢我进行验证的方式

这起到了作用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico'/>
    <title>Octopi Solutions</title>
    <style>
        .topcenter {
            display: block;
            margin: 0;
            position: absolute;
            top: 12%;
            left: 35%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .middlecenter {
            display: block;
            margin: 0;
            position: absolute;
            top: 40%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>


</head>
<body style="background-color: #000000">
<div class="topcenter">
    <h1 style="color:#86070a"><i>Booger Bonsmaras</i>
        <hr>
        Register:
    </h1>
</div>

<div class="middlecenter">
    <form name="joinForm" id="joinForm" accept-charset="UTF-8" class="validate-form infusion-form" method="GET">
        <div class="infusion-field">
            <label for="fname" style="color:#83d3d4"><strong>First Name:</strong></label>
            <div>
                <input id="fname" name="fname" type="text" placeholder="First Name" class="form-control" required
                       aria-required="true"/><br><br>
            </div>
        </div>

        <div class="infusion-field">
            <label for="lname" style="color:#83d3d4"><strong>Surname:</strong></label>
            <div>
                <input id="lname" name="lname" type="text" placeholder="Surname" class="form-control" required
                       aria-required="true"/><br><br>
            </div>
        </div>

        <div class="infusion-submit">
            <input type="Submit" name="submit" value="Add User"/>
        </div>
    </form>
</div>

<script type="text/javascript">
    function hasHtml5Validation() {
        return typeof document.createElement('input').checkValidity === 'function';
    }

    if (hasHtml5Validation()) {
        $('.validate-form').submit(function (e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                $(this).addClass('invalid');
            } else {
                $(this).removeClass('invalid');
            }
        });
    }
</script>
</body>
</html>


章鱼解
topcenter先生{
显示：块；
保证金：0；
位置：绝对位置；
最高：12%；
左：35%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
米德尔中心酒店{
显示：块；
保证金：0；
位置：绝对位置；
最高：40%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
布格·邦斯马拉斯

登记册：
名字：



姓氏：



函数hasHtml5Validation（）{
返回文档的类型。createElement（'input'）。checkValidity=='function'；
}
if（hasHtml5Validation（））{
$（'.validate form'）。提交（函数（e）{
如果（！this.checkValidity（））{
e、 预防默认值（）；
$（this.addClass（'invalid'）；
}否则{
$（this.removeClass（'invalid'）；
}
});
}

我给你写了一段话，谢谢你的快速回复。我改变了它，但是，同样的问题发生了，没有验证。对我来说有效：是的，它可以在pc上工作，甚至在iphone模拟器上，但是，当一个人尝试使用实际的iphone时，它不会做任何验证。我只是做了。iOS 13.5.1 iPhone 11感谢您的努力，我非常感谢。好的，我正在运行13.3.1，让我升级一下，看看这是否有什么不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico'/>
    <title>Octopi Solutions</title>
    <style>
        .topcenter {
            display: block;
            margin: 0;
            position: absolute;
            top: 12%;
            left: 35%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .middlecenter {
            display: block;
            margin: 0;
            position: absolute;
            top: 40%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>


</head>
<body style="background-color: #000000">
<div class="topcenter">
    <h1 style="color:#86070a"><i>Booger Bonsmaras</i>
        <hr>
        Register:
    </h1>
</div>

<div class="middlecenter">
    <form name="joinForm" id="joinForm" accept-charset="UTF-8" class="validate-form infusion-form" method="GET">
        <div class="infusion-field">
            <label for="fname" style="color:#83d3d4"><strong>First Name:</strong></label>
            <div>
                <input id="fname" name="fname" type="text" placeholder="First Name" class="form-control" required
                       aria-required="true"/><br><br>
            </div>
        </div>

        <div class="infusion-field">
            <label for="lname" style="color:#83d3d4"><strong>Surname:</strong></label>
            <div>
                <input id="lname" name="lname" type="text" placeholder="Surname" class="form-control" required
                       aria-required="true"/><br><br>
            </div>
        </div>

        <div class="infusion-submit">
            <input type="Submit" name="submit" value="Add User"/>
        </div>
    </form>
</div>

<script type="text/javascript">
    function hasHtml5Validation() {
        return typeof document.createElement('input').checkValidity === 'function';
    }

    if (hasHtml5Validation()) {
        $('.validate-form').submit(function (e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                $(this).addClass('invalid');
            } else {
                $(this).removeClass('invalid');
            }
        });
    }
</script>
</body>
</html>