0

所以我遇到的问题是，长篇大论，我正在构建一个带有验证等的表单，没什么特别的，但是当单击“提交”按钮时，发生了一些我一生都无法解决的事情，弄清楚为什么。

最初，这个简单的 SUBMIT 按钮的 html 部分是这样的：

   <input type="submit" id="submit" value="Submit"/>

在那个按钮上点击，其中一件事情发生了。

  1. 按钮变得非常小，在幕后（萤火虫等）里面的文字消失了，在萤火虫检查时，代码看起来像这样

    <input type="submit" id="submit" value>

它完全去除了该表单元素属性的值部分。

或者

2.提交按钮“值”成为我的错误消息之一。例如，你会看到类似

<input type="submit" id="submit" value="oops, you forgot something"/>

当用户忘记填写字段时，这是我的错误消息之一。

或者

  1. 在Firefox上，即使在新页面加载/重新加载时，在该按钮上单击鼠标右键，当我右键单击它以选择“查看源代码”或“使用Fbug检查”时，该按钮变为绿色......相同正确满足参数时字段获得的绿色。

我已经停止搞砸了，因为这些很奇怪，所以我希望有人能帮我解决这个问题。到目前为止，它很糟糕。哈哈

这是js：

<script>



$('document').ready(function(e) {

//FORM VARS 
var firstName = $('#form-name');
var formEmail = $('#form-email');
var formSbj = $('#form-subj');
var formMssg = $('#form-mssg');
var mainF = $('#spForm');
var box = $("#box");
var addem = $('#addem');
var addemR = 8;
var formSubBtn = $('#submit');
var formFields = $('#spForm :input');


//FORM ERROR MESSAGES
var error_MK = 'oops, you forgot something';
var error_isntAnum = 'answer must be numerical please';
var error_numAddition = 'So whats 5 + 3 again???';
var finalCheck = false;
var pageErrorDiv = $('#gen_error');


//this one fires on click
function clearField(){
    if($(this).val() == this.defaultValue || $(this).val() == error_MK || $(this).val() == error_isntAnum || 
    $(this).val() == error_numAddition){
        this.value = '';
        //use this as a workaround for the disappearing "submit" text -->   formSubBtn.val('Submit');
    }
}
//this one fires on blur
function checkVals(){
    if($(this).val()==""){
        $(this).css("background-color","red");
        $(this).css("color","white");   
        $(this).val(error_MK);//error mssg

    } else {
        $(this).css("background-color","green");
        $(this).css("color","white");   
    }



}





//this one checks to see if the person can add lol...make sure its not a SPAM robot.
function checkAddem(){
    if(addem.val()== 'oops, you forgot something' || addem.val()=='AND THE TOTAL IS?'){
        addem.css('background-color','red');
        addem.css('color','white');
        addem.val(error_MK);    //error mssg
    } else if(isNaN(addem.val())){
        addem.css('background-color','red');
        addem.css('color','white');
        addem.val(error_isntAnum);//error mssg  
    } else if(addem.val() != addemR){
        addem.css('background-color','red');
        addem.css('color','white');
        addem.val(error_numAddition);//error mssg   
    }
}


formFields.click(clearField);
formFields.blur(checkVals);
addem.blur( checkAddem );


//FINAL CHECK b4 form submittal.
formSubBtn.bind('click', function(){

    //on click double check all fields
    if( firstName.val()=="" || firstName.val()=="ENTER YOUR NAME HERE" ||  firstName.val()== error_MK ||
    formEmail.val()=="" || formEmail.val()== error_MK || formEmail.val()=="ENTER YOUR EMAIL HERE" ||
    formSbj.val()=="" || formSbj.val()== error_MK || formSbj.val()=="SO WHAT DO YOU WANT TO CHAT ABOUT?" ||
    formMssg.val()=="" || formMssg.val()== error_MK || formMssg.val()=="ENTER YOUR MESSAGE HERE" ||
    addem.val() != addemR){
        pageErrorDiv.text("Information entered either no good or blah blah blah");
        return false;
    }else{

        return true;    
    }


});






});
</script>

哦，附：所以你可以看到发生了什么，这是我的测试链接。

http://somdowprod.net/4testing/spFormDev/spContForm

4

2 回答 2

3

听起来您的提交按钮正在被验证，这是有道理的，因为您选择它作为输入之一。代替

var formFields = $('#spForm :input');

尝试这个：

var formFields = $('#spForm :input').not('#submit');
于 2012-05-30T01:57:50.383 回答
2

我只是快速浏览了一下，但这可能与它有关吗？

formFields.blur(checkVals);

我猜 formFields 包含提交按钮，当您单击它时，提交按钮不会返回值，因此它注册了 checkVals 函数，其中包括：

$(this).val(error_MK);//error mssg

这就是为什么您可能会收到错误消息的原因oops, you forgot something。

只是我的2美分...

于 2012-05-30T02:01:41.597 回答