simpleCart（js）將表單輸入驗證添加到電子郵件結帳提交

Question

我在表單上添加了一個驗證，該表單生成一個窗口，指出該字段為空，問題是即使它在無效字段上返回false，它仍在提交表單。

<script type="text/javascript">
function validateForm(){
var x=document.forms["form"]["name"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</script>


<form action="sendjs.php"  name="form" >
                <em><strong>Fill in the fields below BEFORE pressing checkout.</strong></em><br />
                  <input placeholder="Name" type="text" name="name"  value="" id="name" title="Please enter a name!" />
                  <input placeholder="Phone Number" type="text" name="phone" value="" id="phone" />
                  <input placeholder="Email" type="text" name="email" value="" id="email"title="Please enter an email!" />
         <input type="submit"  onclick="return validateForm();" class="simpleCart_checkout" value="Checkout"/>
                </form>

這是simpleCart.js

me.emailCheckout = function kiwi() {    

itemsString = "";
for( var current in me.items ){ 
    var item = me.items[current];
    itemsString += item.name + " " + item.quantity + " " + item.price + "\n";
}   

name = document.form.name.value;
phone = document.form.phone.value;
email = document.form.email.value;


var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "sendjs.php";
form.acceptCharset = "utf-8";
form.appendChild(me.createHiddenElement("jcitems", itemsString));
form.appendChild(me.createHiddenElement("jctotal", me.total));
form.appendChild(me.createHiddenElement("name", name));
form.appendChild(me.createHiddenElement("phone", phone));
form.appendChild(me.createHiddenElement("email", email));
document.body.appendChild(form);    
form.submit();
document.form.submit();
document.body.removeChild(form);
}

Answer 1

您可以執行以下操作：

simpleCart.bind('beforeAdd',function(item){
    if(!item.name){
        // edit the dom if needed
        return false;
    }
});