如何根据表单字段是否有效更改 CSS

Question

我有一个简单的表格，可以一次显示 2 个错误代码，但我只需要显示一个（见下文）。如果用户输入无效电子邮件，#1 应该是唯一显示的，无效由表单输入文本 required pattern=... 确定。如果电子邮件有效，则错误 #2 应该是唯一可见的错误。它由 PHP 结果生成 - 此 PHP 文件通过表单的 html 文件中的 ajax 调用，returns 显示为错误的结果#2.

我的问题：我如何应用 IF 语句或类似语句来确定是否是否满足表单输入字段的模式。如果它不满足（无效），那么也许我们可以通过以某种方式改变它的 CSS 来使它的字体大小为 0px，这只会使 #2 可见。如果满意，那么我们可以继续以某种方式隐藏错误 #2 的 div。

这是表格（隐藏了错误 #2 div "formResponse"）：

<form id="loginform" name="loginform" method="POST" class="login" action="#">
    <input name="emailaddy" id="emailaddy" type="email" class="feedback-input" placeholder="My Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~)" required title="Invalid Email"/>
       <div id="formResponse" style="display: none;"></div>
       <button type="submit" name="loginsubmit" class="loginbutton">Login</button>

</form>

和 css:

 div.error, div.error-list, label.error, input.error, select.error, textarea.error {
      color: #D95C5C!important;
      border-color: #D95C5C!important;
      font-size: 18px;
    }

已更新 AJAX（通过雷吉的回答） - 注意：我认为 if(ema == null || ema == '') 不起作用，因为即使用户输入了乱码仍然显示两个错误。但是，如果我将它更改为 if(ema == 'a')，它会正确地隐藏 formResponse div 并且只显示 label.error。如果字段是 invalid/null，我需要它来隐藏 formResponse - 但 null 似乎不起作用。此外，else 函数不起作用，这意味着 label.error div 出于某种原因不会隐藏。也许 null 应该用正则表达式检查代替？

已更新 AJAX: 为什么将 "hello@example.com" 视为 null？

<script>
 $(document).ready(function() {

    $("#loginform").submit(function(e){
        e.preventDefault();
        $.ajax({
                type: "POST",
                url: "login/login.php",
                dataType:"text",
                data: {email: $('#emailaddy').val(), loginsubmit: 'yes'},
                success:function(result){   
                    if(result === "redirect"){
                      window.location.replace("http://www.example.com/login/private.php");
                    }
                else{
                       //var re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
                       var email = $('#emailaddy').val();
                       var pattern = ".+\@@.+\..+";
                       var valid = email.match(pattern);
                       alert(valid);
                           if (valid == null) {
                                               } 
                        else {
                        $("#formResponse").html("That email address is not registered.").show();
                             } 
                    }
                                     }
            })
    });
});
</script>

Answer 1

您可以使用无效的 PSEUDO CLASS：

input[type=email]:invalid {
  color: red;
}

这里有一堆 css 验证伪 class 你可以使用：

input:valid { ... }
input:invalid { ... }
input:required,
input[aria-required="true"] { ... }
input:optional { ... }
input:out-of-range { ... }
input:in-range { ... }

这是我为您制作的示例，尝试输入无效的电子邮件，您会看到神奇的效果：

Live Demo

Answer 2

在 ajax 中，您可以检查电子邮件并在无效时阻止它进入服务器：

var ema = $('#useremail').val();      

if(ema == null || ema == '' //or whatever)         
{
$('.error1').show();
$('.error1').html('Nope');
$('.error2').hide();

return;
}
else{
//continue with ajax

然后处理从 php 返回的任何错误，例如：

success: function(responseText) { 
if(responseText == "1") {
    $('.error1').hide();
$('.error2').show();

$('.error2').html(//the error msg);
}

Answer 3

我似乎已经按照雷吉的指导解决了我的问题，并调整它以适应我的代码：

<script>
 $(document).ready(function() {

    $("#loginform").submit(function(e){
        e.preventDefault();
        $.ajax({
                type: "POST",
                url: "login/login.php",
                dataType:"text",
                data: {email: $('#emailaddy').val(), loginsubmit: 'yes'},
                success:function(result){   
                    if(result === "redirect"){
                      window.location.replace("http://www.example.com/login/private.php");
                    }
                else{
                       //var re = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
                       var email = $('#emailaddy').val();
                      if(email.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) { 
                      $("#formResponse").html("That email address is not registered.").show();
                                               } 
                        else {

                             } 
                    }
                                     }
            })
    });
});
</script>

如果电子邮件有效但未注册，它只会显示错误#2（formResponse）。

如何根据表单字段是否有效更改 CSS

How to alter CSS based on whether a form field is valid or not

html

php

forms

error-handling

jquery