Question

我正在处理有关表单检查的任务。我坚持如何添加css来验证输入字段是否正确。

所以我有一个电子邮件字段。如果字段不正确，边框将设置为红色。当那个不正确的字段上有CSS类（因此它有一个RED边框）被认为是正确的时，它会删除CSS类，使它看起来恢复正常。如果用户删除他们在电子邮件字段中输入的内容，使其再次变为空，则会再次显示不正确。

HTML：

    <form action="" onsubmit="return validateEmail()">
        <div class="error">
        <fieldset>
            <legend>
                Create New Account
            </legend>
            <label>
                Account: 
                <input name="account" size="16" type="text" />
            </label>
            <label>
                Password: 
                <input name="password" size="32" type="password" />
            </label>
            <label>
                Email: 
                <input name="email" size="32" type="text" id="email" />
            </label>
        </fieldset>
        </div>

JS：

function validateEmail() {
        var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var x = document.getElementById("email");
        if (!email.test(x.value)) {
                alert("Invalid Email");
                x.focus();
                return false;
        }
        return true;
}

CSS：???

有人可以用css帮我吗？非常感谢你！

Answer 1

<form action="" onsubmit="return validateEmail()">
        <div class="error">
        <fieldset>
            <legend>
                Create New Account
            </legend>
            <label>
                Account: 
                <input name="account" size="16" type="text" />
            </label>
            <label>
                Password: 
                <input name="password" size="32" type="password" />
            </label>
            <label>
                Email: 
                <input name="email" size="32" type="text" />
            </label>
        </fieldset>
        </div>

onsubmit应该在表单上，而不是在div上。

＆＃13;

$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var emailID = $("#test").val();
    var email = /[^@]+@[^.]+\.[a-zA-Z]{2,3}/;
    if (!email.test(emailID)) {
      console.log("enter");
      $("#test").css('border', '1px red solid');
    } else {
      $("#test").css('border', '');
    }
  });

});

＆＃13;

<form type="POST">
  <input name="test" id="test" />
  <button>Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

这应该对你有帮助。

Answer 2

没有jQuery：

<强> HTML：

<form action="" onsubmit="return validateEmail(true)" >
    <fieldset><legend>Create New Account</legend>

        <label>Account:</label>
        <input name="account" size="16" type="text" />

        <label>Password:</label>
        <input name="password" size="32" type="password" />

        <label>Email:</label>
        <input id="email" name="email" size="32" type="text" onkeyup="validateEmail(false)" />

        <button>Submit</button>

    </fieldset>
</form>

<强> JavaScript的：

function validateEmail(show_alert) {
        var email_pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var x = document.getElementById("email");

        if( !email_pattern.test(x.value) ) {

            if(show_alert) alert("Invalid Email");

            x.classList.add('error')
            x.focus();
            return false;
        }

        x.classList.remove('error')

        return true;
}

<强> CSS：

form fieldset input.error{
    background:#FDD;
    border:1px solid red;
}

其他提示：

1。）您的onsubmit属性需要位于<form>而不是<div>。

2。）您的<input>电子邮件只有name="email" 但是javascript .getElementById()函数需要它id="email"。

3。）你的javascript功能很棒。所有您需要的是x.classList.add('error')，以便在出现错误时将css类添加到电子邮件输入中。

4。）<input>元素通常不会放在自己的<label>元素中。我把它们放在后面。

Answer 3

尝试向表单添加名称。以下代码它将起作用，并使用Jquery Submit（）函数将减少工作量

 <form name="newForm" action=""> // add name to form

并添加以下代码

    $(document).ready(function() {
 $('form[name="newForm"]')submit(function( e ) {
    e.preventDefault();
    var emailID = $("#test").val();
    var email = /[^@]+@[^.]+\.[a-zA-Z]{2,3}/;
    if (!email.test(emailID)) {
      console.log("enter");
      $("#test").css('border', '1px red solid');
    } else {
      $("#test").css('border', '');
    }
  });

});

添加css以验证字段

3 个答案: