HTML проверка формы на IOS - PullRequest
Новая
       1

HTML проверка формы на IOS

0 голосов
/ 18 июня 2020

В настоящее время я работаю над проектом, в котором мне нужно подключиться к сети и получить доступ к локальной веб-странице. Веб-страница позволяет пользователю ввести свое имя и фамилию и отправить их. При отправке происходит проверка, чтобы убедиться, что все поля были заполнены. Это работает в моем браузере компьютера, но не в моем мобильном браузере IOS. Я попробовал Chrome, FireFox и Safari, но все три не прошли проверку.

К сожалению, я не смог понять, почему это происходит. Если бы кто-нибудь мог объяснить мне причину, по которой он не работает, я буду признателен. 

function validateForm() {
  var user_name = document.forms["myForm"]["fname"].value;
  var user_surname = document.forms["myForm"]["lname"].value;
  if (user_name == "" || user_surname == "") {
    alert("Please fill in the appropriate fields");
    return false;
  }
}
.topcenter {
  margin: 0;
  position: absolute;
  top: 12%;
  left: 35%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middlecenter {
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<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>


  <div class="topcenter">
    <h1 style="color:#86070a"><i>Booger Bonsmaras</i>
      <hr> Register:
    </h1>
  </div>
  <div class="middlecenter">
    <form name="myForm" onsubmit="return validateForm()">
      <label for="fname" style="color:#83d3d4">First name:</label><br>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname" style="color:#83d3d4">Surname:</label><br>
      <input type="text" id="lname" name="lname"><br><br>
      <input type="submit" value="Add User" style="background-color:#ffffff">
    </form>
  </div>

Ответы [ 2 ]

1 голос
/ 18 июня 2020

http://plungjan.name/SO/iosvalidation/index.html

работает в iOS 13.5.1 iPhone 11 Chrome и Safari

Доступ к вашим формам очень старомоден.

Я бы изменил 

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

на 

var user_name = document.getElementById("fname").value;
var user_surname = document.getElementById("lname").value;

и посмотрел, поможет ли это

0 голосов
/ 19 июня 2020

Итак, после некоторых дополнительных исследований и даже тестирования на том же самом телефоне я наконец нашел проблему. Проблема была не в коде html, а в том, как он был размещен. Я использовал micro python в сочетании с сокетами для создания 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...