阻止表单提交不工作,JavaScript

时间:2016-02-10 17:33:14

标签: javascript html forms

您好,谢谢您的时间。

我有一个带有ID付款和提交按钮的表单,但我的JavaScript中似乎有一个错误,因为我只收到警报消息但是如果我输入一个错误的名称,如一行哈希,页面仍会提交符号#######。下面的代码正是我的文件中的代码。

    // form validation, makes sure that the user inputs the correct data types.         

    function validateinput(event){

    var email = document.getElementById('email').value;
    var firstname = document.getElementById('firstname').value;
    var lastname = document.getElementById('lastname').value;
    var message = document.getElementById('message').value;

    var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    var firstnameFilter = /^([" "a-zA-Z.-])+$/;
    var lastnameFilter = /^([" "a-zA-Z.-])+$/;
    var messageFilter = /^([" "a-zA-Z0-9_.-])+$/;



    if (!emailFilter.test(email)) {
    alert('!Enter a email. Or enter a valid email address.');
    document.getElementById('payment').addEventListener('onsubmit', function(event) {event.preventDefault();});
    return false;
    }

    if (!firstnameFilter.test(firstname)) {
    alert('!Enter a first name. Or enter a valid name.');
    document.getElementById('payment').addEventListener('onsubmit', function(event) {event.preventDefault();});
    return false;
    }

    if (!lastnameFilter.test(lastname)) {
    alert('!Enter a last name. Or enter a name., only letters');
    document.getElementById('payment').addEventListener('onsubmit', function(event) {event.preventDefault();});
    return false;
    } 

    if (!messageFilter.test(message)) {
    alert('!Enter a message.');
    document.getElementById('payment').addEventListener('onsubmit', function(event) {event.preventDefault();});
    return false;
    } 

    alert ('Your order was submited')

    }

    document.getElementById('payment').addEventListener("submit", validateinput)

还试过其他方法,认为它们在这个页面上看起来不太合适但在其他方面有用吗?

就像在我的联系页面上使用的那个更改var名称和id一样,

    function validateinput(event){
      var address1 = document.getElementById('address1').value;
    var postcode = document.getElementById('postcode').value;


    var address1Filter = /^([" "a-zA-Z0-9_.-])+$/;
    var postcodeFilter = /^([" "a-zA-Z0-9_.-])+$/;

    var formValid = true;

    if (!address1Filter.test(address1)) {
    alert('!Enter an address. Or enter a valid address., only letters and   numbers');
    formValid = false;
    event.preventDefault();
    return false;
    }

    if (!postcodeFilter.test(postcode)) {
    alert('!Enter a postcode. Or enter a valid postcode., only letters and numbers');
    formValid = false;
    event.preventDefault();
    return false;
    } 


    alert ('Your order was submited')

    }

    document.getElementById('payment').addEventListener("submit", validateinput)

那么我做错了什么?

html

    <!doctype html>

    <!-- name: Edwin martin -date: 30/11/2015 -task:  a form  with split up inputs using the
    <fieldset> & <legend> tags -->

    <html lang="en">


      <head>
        <title>contact</title>
        <script type="text/javascript" src="scripts/contact2.js"> </script> 
            <!-- ensures the document is using the correct char set --> 
              <meta charset="utf-8">
              <meta name="description" content="contact page">  

              <link rel="icon" href="images/fav.png" type="image/png"/>

            <!-- 
                   The below section looks like a comment, but it's a conditional include statement.
                   It's ignored by all browsers except IE9.  html5shiv is a library that fixes some HTML5 
                   IE bugs. 
            -->

              <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
              <![endif]-->


                  <!-- pulls in the styles sheet -->
              <link rel="stylesheet" href="styles/indexstyles.css">


      </head>


            <body onload="main()">


             <!-- start of the form, id form sets the position, size, border style and color -->
             <div id="form2">

                       <!-- sets the link position, list and text style of the header, id head color sets the background color for the division around the header -->
                        <div id="head">
                            <header id="headcolor">
                                <div id="toplinks">
                                     <ul>
                                        <li class="tl"> <input type="button" class="topbutton" name="b1" value="Index" onclick="location.href='index.html'"> </li>
                                        <li class="tl"> <input type="button" class="topbutton" name="b1" value="order" onclick="location.href='order.html'"> </li>
                                    </ul>
                                </div> <br>
                                       <br>
                            </header> 
                            <h1 id="title"> Contact </h1>
                            <p> southampton solent pizzas: southampton solent university branch. E Park Terrace, Southampton, Hampshire SO14 0YN </p>
                        </div>

                        <div id="map"> </div>


                    <!-- id payment sets the input boxs background color , position and border for invaild - vaild -->
                    <form id="payment">
                        <!-- Contact Information section --> 
                            <fieldset>  
                                <legend> Personal Information </legend> 
                                <p> <label> First Name(*): </label> <input type="text" name="first_name" id="firstname"  placeholder="enter a first name" class="add1"></p>
                                <p> <label> Last Name(*):   </label> <input type="text" name="last_name" id="lastname"  placeholder="enter a last name" class="add1"></p>
                                <p> <label> Email(*): </label> <input type="text" name="email" id="email" placeholder="enter a email" class="add1"></p>
                                <p> <label>Phone Number: </label> <input type="text" name="phone" id="phone"></p>
                                <p> <label> message(*):   </label> <input type="text" name="message" id="message" placeholder="enter your message" class="add1"></p>
                            </fieldset>


                        <!-- Submit button --> 

                                <input type="submit" class="submit_button"> 
                                <input type="reset" class="reset_button"> 


                    </form>

            </div>
                <script type="text/javascript" src="scripts/contact.js"> </script> 

                 <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
        </body>
    </html>

我还有另一个JS脚本,您可以从两个不同的链接中看到。但即使我删除该链接 - 代码仍然提交错误输入,因为此代码只读取空输入

 //onload callback function
 function main() {

 console.log("in main function");
  var myForm  = document.getElementById("payment");
  myForm.addEventListener("submit",validateForm);
}

 //validate callback function 
function validateForm(event) {
var formValid = true;
var myForm = document.getElementById("payment"); 

if (myForm.first_name.value == "") {
    formValid = false;
    //display error message 
    document.getElementById("firstname").className += " formInvalid"; //add  the class .formInvalid
    //stop form from submitting
    event.preventDefault();
} 

if (myForm.last_name.value == "") {
    formValid = false;
    //display error message 
    document.getElementById("lastname").className += " formInvalid"; //add the class .formInvalid
    //stop form from submitting
    event.preventDefault();
} 

if (myForm.email.value == "") {
    formValid = false;
    //display error message 
    document.getElementById("email").className += " formInvalid"; //add the class .formInvalid
    //stop form from submitting
    event.preventDefault();
} 

if (myForm.message.value == "") {
    formValid = false;
    //display error message 
    document.getElementById("message").className += " formInvalid"; //add the class .formInvalid
    //stop form from submitting
    event.preventDefault();
} 
}

2 个答案:

答案 0 :(得分:0)

document.getElementById('payment').addEventListener("submit", validateinput),问题是你要将参数传递给validateinput方法,但你不能这样做,将参数传递给回调方法引用,你应该包装它在这样的匿名函数中。

document.getElementById('payment').addEventListener("submit", function(event) {
    validateinput(event);
});

答案 1 :(得分:0)

我认为你的Javascript过于复杂化了。如果您更改提交以直接调用该函数,则可以更轻松地处理否定状态。

for (int i = 0; i < list.size(); i++){
    if(list.get(i) %2 == 0){
         return list.get(i);
    }
}

您需要稍微修改validateinput函数,因为您将不再传递事件。