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

Question

我有一个简单的表单，可以一次显示 2 个错误代码，但我只需要显示一个（见下文）。如果用户输入 invalid 电子邮件，则应该只显示 #1 ，无效由表单输入文本required pattern=... 确定。如果电子邮件是有效，则错误 #2 应该是唯一可见的错误。它是从 PHP 结果生成的 - 通过表单的 html 文件中的 ajax 调用此 PHP 文件并返回显示为错误 #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（通过 reggie 的回答） - 注意：我认为 if(ema == null || ema == '') 不起作用，因为即使用户输入乱码，它仍然会显示 both 错误.但是如果我把它改成if(ema == 'a')，它会正确地隐藏formResponse div，只显示label.error。如果该字段无效/为空，我需要它隐藏 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

在 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 2

您可以使用无效的伪类：

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

这里有一堆你可以使用的 CSS 验证伪类：

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

这是我为你做的一个例子，试着输入一个无效的电子邮件，你会看到神奇的：

Live Demo

Answer 3

我似乎已经按照 reggie 的指导解决了我的问题，并对其进行了调整以适合我的代码：

<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)。