如果我的提交按鈕有效，我的警告不會。如果我修復它我的警告工作，但我的提交按鈕不會

Question

我想做一個輸入字段，我想驗證所有必填字段填寫。我有它的工作，但在試圖使無線電輸入「需要」我搞砸了。根據我收到的一些建議，我進行了測試和捕獲，並重新啓用提交按鈕，但我的警告不再起作用。如果任何人都能理解爲什麼我會真的很感激它。讓我知道如何爲單選按鈕添加警告。我的代碼是在這裏http://jsfiddle.net/J2yWQ/55/

JavaScript的

 function emailWarning(){ 
     var check = document.getElementById("check"); 
      check.className = 'show'; 
    } 

    function validateEmail(xem) { 
     var re = /\S+@\S+\.\S+/; 
     return re.test(xem); 
    } 

    function postData() { 
     var tt = validateEmail(email); 
     if (tt == true){ 
      xmlhttp.open('POST', 'payment.php', true); 
      xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
      xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email&ad8&ad9&ct10&st11&zp12&co13); 
     } else { 
      emailWarning(); 
     } 
    } 

    function insert() { 
     try { 
     if (window.XMLHttpRequest) { 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } 


     cn1 = 'child_name'+document.getElementById('child_name').value; 
     ag2 = 'age'+document.getElementById('age').value; 
     hm3 = 'hometown'+document.getElementById('hometown').value; 
     bg4 = 'boy_girl'+valueRadioButtonList('boy_girl').value; 
     fn5 = 'first_name'+document.getElementById('first_name').value; 
     ln6 = 'last_name'+document.getElementById('last_name').value; 
     email = 'email'+document.getElementById('email').value; 
     ad8 = 'address1'+document.getElementById('address1').value; 
     ad9 = 'address2'+document.getElementById('address2').value; 
     ct10 = 'city'+document.getElementById('city').value; 
     st11 = 'state'+document.getElementById('state').value; 
     zp12 = 'zip'+document.getElementById('zip').value; 
     co13 = 'country'+document.getElementById('country').value; 

     var flagInvalid = false; 
     var tempArray = document.getElementsByClassName("required"); 
     for (var i = 0; i < tempArray.length; i++) { 
      if (tempArray[i].value == ""){ 
       flagInvalid = true; 
       break; 
       } 
     } 


     if (flagInvalid == false) { 
      postData(); 

     } else { 

      var log = document.getElementById("log"); 
       log.className = 'show'; 
      var log1 = document.getElementById("log1"); 
       log1.className = 'show'; 
      var log2 = document.getElementById("log2"); 
       log2.className = 'show'; 
      var log3 = document.getElementById("log3"); 
       log3.className = 'show'; 
      var log4 = document.getElementById("log4"); 
       log4.className = 'show'; 
      var log5 = document.getElementById("log5"); 
       log5.className = 'show'; 
      var log6 = document.getElementById("log6"); 
       log6.className = 'show'; 
      var log7 = document.getElementById("log7"); 
       log7.className = 'show'; 
      var log8 = document.getElementById("log8"); 
       log8.className = 'show'; 
      var log9 = document.getElementById("log9"); 
       log9.className = 'show'; 
      var log0 = document.getElementById("log0"); 
       log0.className = 'show'; 
      var logA = document.getElementById("logA"); 
       logA.className = 'show'; 

     } catch(e) { 
      alert('An error occured in inert: ' + e); 
      } 
    } 
} 

function validateRadioButtonList(radioButtonListName) 
{ 
var listItemArray = document.getElementsByName(radioButtonListName); 
var isItemChecked = false; 
for (var i=0; i<listItemArray.length; i++) 
{ 
    var listItem = listItemArray[i]; 
    if (listItem.checked) 
    { 
    isItemChecked = true; 
    } 
} 
return isItemChecked; 
} 

function valueRadioButtonList(radioButtonListName) 
{ 
var listItemArray = document.getElementsByName(boy_girl); 
var isItemChecked = false; 
for (var i=0; i<listItemArray.length; i++) 
{ 
    var listItem = listItemArray[i]; 
    if (listItem.checked) 
    { 
    return listItem.value; 
    } 
} 
return null; 
} 

Answer 1

嗯，你的代碼甚至沒有運行。在任何瀏覽器中打開它，並在JavaScript控制檯中顯示錯誤。

Uncaught SyntaxError: Unexpected token catch fiddle.jshell.net:105 

這是你的失敗打開和關閉括號。你的else語句，在catch（e）之上並沒有關閉。正確縮進代碼以查看它。通過http://jsbeautifier.org/運行您的代碼以獲得正確的間距並使用http://www.jshint.com/清理您的代碼。

的另一個問題是這種

xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email&ad8&ad9&ct10&st11&zp12&co13); 

這不是你如何建立一個字符串。

這樣做的更好的方法是改變代碼

cn1 = 'child_name'+document.getElementById('child_name').value; 
ag2 = 'age'+document.getElementById('age').value; 
hm3 = 'hometown'+document.getElementById('hometown').value; 

到

var myProps = []; 
myProps.push('child_name=' + encodeURIComponent(document.getElementById('child_name').value)); 
myProps.push('age=' + encodeURIComponent(document.getElementById('age').value)); 
myProps.push('hometown=' + encodeURIComponent(document.getElementById('hometown').value)); 

和發送將

xmlhttp.send(myProps.join("&")); 

更妙的是一個輔助功能添加內容添加到數組。

var myProps = []; 
function addProp(id) { 
    var value = encodeURIComponent(document.getElementById(id).value); 
    myProps.push(id + "=" + value); 
} 

addProp('child_name'); 
addProp('age'); 
addProp('hometown'); 

或者爲什麼即使指定字段循環通過窗體並添加元素。

Answer 2

當我打開Chrome控制檯（請參閱James上面的鏈接）時，發現錯誤是您有一個「沒有嘗試的catch」。

更加緊密地尋找了很多之後，我注意到，你缺少一個右括號爲您的if/then，在這點：

  var logA = document.getElementById("logA"); 
       logA.className = 'show'; 
     // there should be a closing } here 
    } catch(e) { 
     alert('An error occured in inert: ' + e); 
    } 

這清除了一個錯誤。在這個插入函數下還有一個額外的功能......擺脫它，最明顯的語法錯誤消失了。

現在，至於修復這些......的其他部分......有很多地方你可以，應該重新審視你試圖做的事情。例如，在insert（）中的所有變量都應該被限定範圍，因爲現在它們默認爲全局範圍，它們可以輕易被覆蓋。

你需要做更多關於使用ajax發佈數據的研究，而且我沒有時間詳細討論這裏的所有細節（這裏有數百個關於這個的教程），但是我分叉你的代碼，評論，至少向你展示了一些你的代碼需要改變或者有待改進的地方。

http://jsfiddle.net/mori57/3RDBY/

不要太灰心，但是，由於JavaScript有很多支持在那裏，巨大的發電量，一旦你習慣了它！