2013-03-01 127 views
1

網址:Form not working單選按鈕沒有被驗證

我有以下腳本,應該驗證表單並提交喜歡這裏的例子:form working

但由於某些原因,它不工作的第一個鏈接。

我的Javascript代碼保持不變:

$("form").submit(function() { 
    var html = ''; 
    var submitme = true; 
    $(':radio').each(function() { 
     nam = $(this).attr('name'); 
     if (!$(':radio[name="'+nam+'"]:checked').length) { 
      $(':radio[name="'+nam+'"]+label').addClass('error'); 
      if(html.indexOf(nam) < 0){ 
       html += nam +' group not checked' + '</br>'; 
      } 
      submitme = false; 
     } 
     else { 
      $(':radio[name="'+nam+'"]+label').removeClass('error'); 
     } 
    }); 
    if(submitme == false){ 
     $('.errorDiv').empty().append(html).show().addClass('error'); 
    } 
    else{ 
     $('.errorDiv').hide(); 
    } 

    return submitme; 
}); 

我所希望做的是驗證表單,並進行任何單選按鈕不選擇的紅與不提交表單。一旦用戶選擇了所有的表單無線電,表單應該提交。

我也有過這樣的代碼,禁用完成所有選擇,以便用戶不能提交兩次提交按鈕:

$("form").submit(function() { 
     var form = $(this); 
     form.find("input[type=submit]").attr("disabled", "disabled") 
     form.find("input[type=submit]").attr("value", "Processing..."); 
     // prevent the user from hitting ENTER on a field to submit again 
     form.find("input").attr("readonly", true); 
     document.body.style.cursor = "wait"; 
}); 

任何想法,把在先前的jQuery代碼片段?

+0

值和殘疾的性質不是屬性 – 2013-03-01 17:48:21

+0

你'南='做一個全球性的,它應該是'VAR南=' – 2013-03-01 17:52:01

+0

你做沒有在您的DOM中包含錯誤消息的div。我的意思是class'errorDiv'。 – 2013-03-01 17:53:13

回答

1

您必須在頁面上包含該代碼才能使其工作。

將您的文件鏈接爲miscScripts.js無效的javascript。

它始於:

<!-- 

// function to swap inner DIVs in homepage left content 
function showDiv(div_number) { 

}); 
--> 

到底應該是:(刪除的頁面級註釋標記)

// function to swap inner DIVs in homepage left content 
function showDiv(div_number) { 

結束
}); 

僅供參考我沒有看到任何文件中的「提交」代碼,您網頁上的哪個文件位於?

這些是頁面的源代碼的鏈接:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="theScriptsStyles/miscScripts.js"></script> 


<script type="text/javascript" src="theScriptsStyles/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="theScriptsStyles/jquery.hoverIntent.minified.js"></script> 
<script type="text/javascript" src="theScriptsStyles/jquery.naviDropDown.1.0.js"></script> 

EDIT2:OK,我花了一點時間檢查一下你的代碼,似乎在地方有點古怪,我做了一些毛利假設在你的目標和重做你的代碼產生這個:

注意:我用更改事件關閉紅色錯誤,因爲用戶更正表單。你可以使用它,或者按你認爲合適的方式修改。

$("form#myform").submit(function (e) { 
    var myform = $(this); //done this way in case selector has multiple forms 
    var invalidCount = myform.data('hasinvalidentries'); //check validation 
    if (invalidCount === 0) { //0 not falsy value as 0 set errors check below 
     return; // let the event bubble away 
    } 
    e.preventDefault(); //not check so prevent submit 
    var mysubmitButton = myform.find("input[type=submit]"); 
    mysubmitButton.prop("disabled", true).data('buttontext', mysubmitButton.val()).val('processing...'); 
    document.body.style.cursor = "wait"; 
    var html = ''; 
    var submitme = true; 
    $('input[type=radio]').each(function() { 
     var nam = $(this).attr('name'); 
     var radioGroup = myform.find('input:radio[name="' + nam + '"]'); 
     if (!radioGroup.is(':checked')) { 
      radioGroup.next('label').addClass('error'); 
      if (html.indexOf(nam) < 0) { 
       html += nam + ' group not checked' + '<br />'; 
      } 
      submitme = false; 
     } 
    }); 

    if (submitme) { 
     $('.errorDiv').hide(); 
     myform.data('hasinvalidentries', 0).submit(); 
    } else { 
     $('.errorDiv').empty().append(html).show().addClass('error'); 
     return submitme; 
    } 
}); 
/* Check to set the radio group as no errors when change one as one will have to be selected. 
    Still possible if I manually using code set all to unselected, but acts on users changes at least. 
    */ 
$('form#myform').on('change', 'input:radio', function() { 
    var myform = $(this).parents('form'); //done this wa in case selector incudes multiple forms 
    var errorCount = myform.find('.error').length; 
    if (errorCount) { 
     var nam = $(this).attr('name'); 
     myform.find(':radio[name="' + nam + '"]+label').removeClass('error'); 
     var mysubmitButton = myform.find("input[type=submit]"); 
     mysubmitButton.removeProp("disabled").val(mysubmitButton.data('buttontext')); 
     errorCount = myform.find('.error').length; 
     myform.data('hasinvalidentries', errorCount); 
    } 
}); 

這裏是代碼的工作示例:http://jsfiddle.net/whNtP/

+0

我按照我們的建議刪除了它。它現在應該工作嗎? – Si8 2013-03-01 19:20:22

+1

該文件'miscScripts.js'不包含提交代碼...它是否在其他地方?如果沒有......請參閱我答案的第一行。 – 2013-03-01 19:31:12

+0

有人提交的表格都是隨機的,所以我禁用了腳本,但是我在提交的答案中發佈了提交腳本。請確認。 – Si8 2013-03-01 19:41:29