Question

我已经制作了一个包含必填字段和自定义错误消息/验证的表单，这些表单都显示/正常工作，但如果错误得到纠正，表单仍然无法提交。在我添加内联oninvalid检查之前，这工作正常。不确定我做错了什么。

代码：

<form role="form" method="post" action="contact-form.php">
    <input type="text" class="input-field" name="name" id="name" placeholder="Name" required oninvalid="this.setCustomValidity ('Please enter your name.')" />
    <input type="email" class="input-field" name="email" id="email" placeholder="Email" required />
    <textarea name="message" class="textarea-field" id="message" placeholder="Message" required oninvalid="this.setCustomValidity ('Please enter your message.')"></textarea>
    <input type="submit" value="Contact Me" class="btn btn-primary btn-xl" />             
</form>
<script>
    var email = document.querySelector( "#email" );
    function setErrorMessage() {
        if ( email.validity.valueMissing ) {
            email.setCustomValidity( "Please enter your email address." );
        } else if ( email.validity.typeMismatch ) {
            email.setCustomValidity( "Please enter a valid email address." );
        }
    };
    setErrorMessage();
    email.addEventListener( "change", setErrorMessage );
</script>

JSFiddle：http://jsfiddle.net/44Lrgmjc/

非常感谢任何帮助！

感谢。

Answer 1

我调整了您的javascript并添加了（密钥）验证电子邮件功能。这是一个fiddle

function validate{
function email(){
    if(form.email.value == "") {
      alert("Please enter your email");
      form.email.focus();
      return false;
    }

    // regular expression to match only alphanumeric characters and spaces
    var re = /^[\w ]+$/;

    // validation fails if the input doesn't match our regular expression
    if(!re.test(form.email.value)) {
      alert("Invalid email address");
      form.email.focus();
      return false;
    }
     // validation was successful
    return true;
}

function name(){

   If(form.name.value == "") {
      alert("Please enter your name");
      form.name.focus();
      return false;
    }

     // validation was successful
    return true;
    }
    
function msg{
        if(form.message.value == "") {
      alert("Please enter your message");
      form.message.focus();
      return false;
    }

    

    // validation fails if the input doesn't match our regular expression
    if(!re.test(form.message.value)) {
      alert("Invalid message content");
      form.message.focus();
      return false;
    }
    
    // validation was successful
    return true;}}
</script>
<script>
    function validateEmail()
{

   var emailID = document.form.email.value;
   atpos = emailID.indexOf("@");
   dotpos = emailID.lastIndexOf(".");
   if (atpos < 1 || ( dotpos - atpos < 2 )) 
   {
       alert("Please enter correct email ID")
       document.form.email.focus() ;
       return false;
   }
   return( true );
}

<form role="form" method="post" action="contact-form.php" onsubmit="return validate(this);">
        <input type="text" class="input-field" name="name" id="name" placeholder="Name" required oninvalid="alert ('Please enter your name.')"/>
    <input type="email" class="input-field" name="email" id="email" placeholder="Email" required oninvalid="alert ('Please enter a valid email.')"/>
    <textarea name="message" class="textarea-field" id="message" placeholder="Message" required oninvalid="alert ('Please enter your message.')" ></textarea>
    <input type="submit" value="Contact Me" class="btn btn-primary btn-xl"/>
</form>

Reference

HTML5必填表单字段

1 个答案: