为什么是input：当输入为空时invalid为true？ [英] Why is input:invalid true when the input is empty?

问题描述

目前，我试图模仿此示例。

当你使用另一个输入类型时，我们说电子邮件，一个基本的

所以在我眼里有这个问题的解决方案：

1. 在任何地方使用type = text，这是非常糟糕的，因为在手机上你不会得到电子邮件类型的键盘。


2. 使用JavaScript检查输入是否有值。

我希望我遗漏了一些东西，还有另一个例子来实现我想要。在完美的世界中，空输入将不会被验证，因此占位符将显示其正常状态。然后当用户填写任何类型的数据时，验证将开始。这是可能与纯CSS吗？

谢谢所有！

HTML：

 < fieldset id =fieldset1> 
< input type =textrequired /> 
< label>名字< / label> 
< / fieldset> 
< fieldset id =fieldset2> 
< input type =emailrequired /> 
< label>电子邮件地址< / label> 
< / fieldset> 
  

CSS：

 code> fieldset {
 position：relative; 
 margin：40px 0 0 0; 
 padding：0; 
 border：none; 
} 
字段集输入{
 height：2.5rem; 
 line-height：2.25rem; 
 padding：0 0.9375rem; 
 color：white; 
 font-size：0.75rem; 
 font-weight：700; 
 border：none; 
 outline：none！important; 
 -webkit-box-shadow：none！important; 
 box-shadow：none！important; 
 background：＃9a9a9a; 
 display：block; 
 width：100％; 
 border：2px solid transparent; 
 -webkit-transition：all 100ms ease-out; 
 transition：all 100ms ease-out; 
 border-radius：0px！important; 
 -webkit-border-radius：0px！important; 
} 
字段集标签{
 position：absolute; 
 color：white; 
 font-size：0.75rem; 
 text-transform：uppercase; 
 font-weight：bold; 
 -webkit-transition：all 100ms ease-out; 
 transition：all 100ms ease-out; 
 line-height：2.5rem; 
 left：0.9375rem; 
 top：0; 
 display：block; 
 text-align：left; 
} 
字段集输入：focus + label，
字段集输入：valid + label {
 top：-1.875rem; 
 color：black; 
} 
  

我做了一个JSFiddle来说明我的问题，查看它这里

编辑：因为不清楚1l13v我想要实现，我会重复一遍：我知道一个字符串不是有效的电子邮件地址，所以我现在的解决方案将永远不会使用任何其他输入类型比文本。

我想实现这个：

1. 有一个CSS-only解决方案来检查输入是否有任何值。如果是空的，我可以在其正常位置显示占位符，否则，可以在输入上方显示占位符。


2. 输入[type =email ：当输入完全为空时，无效的make返回false。

如果这两个解决方案都不可能，切换到Javascript来解决我的问题，除非有一个我忘记的解决方案。

我使用这个作为我的解决方案：

  function checkInputValue（）{
 if（$（this）.val（）！==''）{
 $（this） .parents（'fieldset'）。addClass（'valid'）; 
} else {
 $（this）.parents（'fieldset'）。removeClass（'valid'）; 
} 
}; 
 
 $（'。input1'）。on（'blur'，checkInputValue）; //检查输入是否有值
  

解决方案

您输入正常文本，并且您希望电子邮件标签 EMMAIL ADDRESS 上升，但是当您放弃该输入电子邮件的焦点时不会发生，因为您离开输入文本无效，即您的文本不是这样： [e-mail]

除非您的输入是有效的电子邮件：

 字段集输入：有效+标签{
 top：-1.875rem; 
 color：black; 
} 
  

关于输入电子邮件：

根据浏览器支持，电子邮件地址可在提交时自动
验证。

某些智能手机识别电子邮件类型，并向
键盘添加.com以匹配电子邮件输入。

UPDATE

如果您的标签仍在电子邮件上方，尽管其值不是有效的电子邮件，那么您必须使用javascript。

使用jQuery尝试此代码：

  var emailInput = $（'＃fieldset2> input'）; 
 var label = $（'＃fieldset2> label'）; 
 
 emailInput.blur（function（）{
 if（emailInput.val（）！==''）{
 label.addClass（'valid'）; 
} else {
 label.removeClass（'valid'）; 
} 
}）; 
  

和此css类别：

  .valid {
 top：-1.875rem; 
 color：black; 
} 
  

与您的字段设置标签相同的规则

查看此 fiddle < a>

Currently I'm trying to emulate this example. This works fine, however it has got one big restraint: it only works when your input type is text.

When you use another input type, let's say email, a basic string isn't valid, so the placeholder falls over the text.

So in my eyes there are to solutions to this problem:

1. Use type=text everywhere, which is kinda crappy, because on mobile phones for example you won't get the email-type keyboard.
2. Use JavaScript to check if the input has a value.

I hope I'm missing something and there's another example to achieve want I want. In a perfect world, an empty input wouldn't be validated, so the placeholder will show its normal state. Then when the user fills in any kind of data, the validation will begin. Is this possible with pure CSS?

Thanks all!

HTML:

<fieldset id="fieldset1">
    <input type="text" required />
    <label>First name</label>
</fieldset>
<fieldset id="fieldset2">
    <input type="email" required />
    <label>Email address</label>
</fieldset>

CSS:

fieldset {
    position: relative;
    margin:40px 0 0 0;
    padding:0;
    border:none;
}
fieldset input {
    height: 2.5rem;
    line-height: 2.25rem;
    padding: 0 0.9375rem;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: #9a9a9a;
    display: block;
    width: 100%;
    border: 2px solid transparent;
    -webkit-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}
fieldset label {
    position: absolute;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    line-height: 2.5rem;
    left: 0.9375rem;
    top: 0;
    display: block;
    text-align: left;
}
fieldset input:focus + label, 
fieldset input:valid + label {
    top: -1.875rem;
    color: black; 
}

I made a JSFiddle to illustrate my problem, view it here

EDIT: since it's not clear to 1l13v what I want to achieve, I'll repeat myself: I know a string isn't a valid email address, so the solution I've now will never work with any other input type than text.

I want to achieve this:

1. Have a CSS-only solution to check if a input has any value whatsoever. If its empty, I can show the placeholder at its normal position, when it isn't, I can show the placeholder above the input.
2. Make a input[type="email"]:invalid make return false when the input is completely empty.

If both these solutions aren't possible, I think my only solution is to switch to Javascript to solve my problem, unless there's a solution which I'm forgetting. I hope I'm forgetting something, I wan't to avoid using Javascript for this problem.

I used this as my solution:

function checkInputValue() {
    if($(this).val() !== ''){
        $(this).parents('fieldset').addClass('valid');
    } else {
        $(this).parents('fieldset').removeClass('valid');
    }
};

$('.input1').on('blur', checkInputValue); // Check if input has a value

解决方案

Your problem is that you enter normal text and you want the email label EMMAIL ADDRESS to go up, but this isn't happening when you loose focus of that input email because after you leave the input text is not valid, i.e. your text is not like: [e-mail]

This will never be applied unless your input is a valid email:

fieldset input:valid + label {
    top: -1.875rem;
    color: black; 
}

About input email:

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

UPDATE

If you still wanna have your label above email despite its value is not a valid email, then you must use javascript.

Try this code using jQuery:

var emailInput = $('#fieldset2 > input');
var label = $('#fieldset2 > label');

    emailInput.blur( function(){
    if(emailInput.val() !== ''){
        label.addClass('valid');
    } else {
        label.removeClass('valid');
    }
});

and this css class:

.valid {
    top: -1.875rem;
    color: black; 
}

i.e. same rules as your fieldset label

See this fiddle

这篇关于为什么是input：当输入为空时invalid为true？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！