如何停止表單提交併通過JavaScript驗證？

我遇到的是看起來像這樣，我不能改變的一種形式：如何停止表單提交併通過JavaScript驗證？

<form id="mx_locator" name="mx_locator" method="post" action="search-results"> 

    <!-- form elements --> 
    <span><input type="image" src="/images/search.png" onclick="loader()"></span> 

</form>

這是一個CMS，它知道轉發表單數據和點擊時產生一個結果頁面的內部。加載函數調用只是處理添加/刪除類的一些效果。

我被要求寫一個驗證表單的javascript。有一個郵政編碼字段和一個城市領域。其中一個或另一個必須填寫。不是兩個，而是兩個。所以當有人點擊那個按鈕時，我的JavaScript必須停止提交，請檢查這些字段，並且只有在它們是好的時才前進。

總之，我該如何去做這件事？更重要的是，我擔心表單會處理，無論js做什麼，因爲CMS正在控制它。我根本無法更改表單html。我可以添加JS。

來源

2013-03-23 user1729506

首先將onsubmit屬性添加到表單標記。

<form id="mx_locator" onsubmit="return ziporcity(this)" name="mx_locator" ...

然後腳本標記添加到您的文檔包含或鏈接到功能ziporcity，你可以這樣寫：

<script> 
function ziporcity(f) { return /\d{5}/.test(f['zipFieldName'].value) || /\S/.test(f['cityFieldName'].value); } 
</script>

這個簡單的驗證函數檢查一個或另一個或兩個是真實的，zip字段包含5個連續的數字（9個數字也會通過），和/或城市字段包含非空格。

您需要將zipFieldName更改爲表單中zip字段的name =「...」屬性中包含的名稱，並且將cityFieldName作爲城市字段的名稱。

來源

2013-03-23 00:41:59

「首先將onsubmit屬性添加到表單標記中。」我不能。我無法改變表格的html。我只能在頁面的其他地方添加js。 – user1729506 2013-03-23 18:34:38

然後添加此代碼以及以前的代碼： – 2013-03-25 03:05:36

<script> 
$(document).ready(function() { 
    $("#mx_locator").submit(function() { 
     var isValid = callSomeValidationFunctionThatReturnTrueFalse(); 
     return isValid; // the key is return false will prevent submit 
    }); 
}); 
</script>

您將需要包含jQuery。如果您的表單提交事件被CMS完全覆蓋，那麼只需隱藏並創建一個新表單即可。

<script> 
$(document).ready(function() { 
    // save old form html and hide 
    var myForm = $("#mx_locator"); 
    var formHtml = myForm.html(); 
    myForm.html("").hide(); 

    // append new form in its place and 
    var myNewForm = $('<form id="mx_locator2" name="mx_locator2" .../></form>'); 
    myNewForm.html(formHtml); 
    myNewForm.insertAfter(myForm); 
}); 
</script>

來源

2013-03-23 01:04:23 Noogen

imo，沒有jQuery的替代方案將有利於答案 – 2013-03-23 01:18:06

據我所知，jquery在整個網站上是全球可用的。使用jQuery應該可以正常工作，但如果沒有，我很快就會發現。總之，我主要關心的是驗證表單，而不必操縱表單的html（除了JavaScript之外 - 我不能直接編輯表單的html）。希望CMS不會妨礙。 p.s.隱藏和製作一種新形式並不是真的可行，至少在atm。表單as-is根據其精確的結構與幾個js和php文件一起使用。改變它需要改變所有這些。 – user1729506 2013-03-23 21:10:06

如何停止表單提交併通過JavaScript驗證？

回答

相關問題