URL типа ввода - указывает "Введите URL-адрес", если HTTP не включен

Я работал над формой и сталкивался с проблемой. Я использую input type = "url", чтобы iPad и iPhone и т.д. Подтягивали правильную клавиатуру - и старались следовать новым стандартам.

Однако я столкнулся с проблемой. В форме, где веб-адрес не требуется - если пользователь вводит данные на веб-сайте www.theiraddress.com, большинство браузеров выделяют его красным/желтым, чтобы уведомить пользователя, что им нужно ввести "http://" перед ним.

Я использовал вход: недействительный css для удаления этого контура.

Однако теперь, когда пользователь отправляет форму, браузер выдает сообщение об ошибке "Введите URL-адрес".

Поле не требуется - я просто хотел, чтобы людям было проще вводить их адреса, но все же отображать правильные клавиатуры на мобильных устройствах и т.д.

Есть ли способ удалить эту раздражающую всплывающую подсказку, которая запрещает пользователям отправлять форму?

Ответ 1

Вы можете добавить атрибут novalidate в элемент формы. Fx:

<form method="post" action="/foo" novalidate>...</form>

См. Https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

Взято из этого ответа: fooobar.com/questions/19301/...

Ответ 2

В нижней части ссылочной страницы (http://www.wufoo.com/html5/types/3-url.html) вы можете использовать тип ввода текста и атрибут inputmode (http://www.wufoo.com/html5/attributes/23-inputmode.html), чтобы перейти на клавиатуру на мобильных устройствах, не беспокоясь о текстовом поле.

Ответ 3

Насколько мне известно, в соответствии со стандартом требуется протокол (состояние реализации входного поля Url). Вы также можете использовать регулярное выражение для проверки этого поля, такого как /^ (? /^(?:(http|https|ftp):\/\/)?(?:[\w-]+\.)+[az]{2,6}(\/)?/i

Ответ 4

Если я правильно понял, вы хотите, чтобы при входе пользователя в URL-адрес без http://, автоматически добавляет http://front of url, чтобы не сообщать об ошибке

Попробуй это:

//PUT THIS IN HEAD

function check_url(){
    //Get input value
    var elem = document.getElementById("url_input");
    var input_value = elem.value;
	//Set input value to lower case so HTTP or HtTp become http
	input_value = input_value.toLowerCase();
    
    //Check if string starts with http:// or https://
    var regExr = /^(http:|https:)\/\/.*$/m;
    
    //Test expression
    var result = regExr.test(input_value);
	
	//If http:// or https:// is not present add http:// before user input
    if (!result){
		var new_value = "http://"+input_value;
		elem.value=new_value;
    }
}

Try to input www.myurl.com<br />
Try to input http://www.myurl.com<br />
Try to input https://www.myurl.com<br /><br />
URL INPUT:<br />
<input type="url" id="url_input" name="url_input" /><br /><br />
<input type="button" value="Submit!!" onclick="check_url()" />