使用帶有驗證的href長提交表單

Question

我在使用這個小腳本時遇到了麻煩。 我有一個產品清單。 可以從此列表將每種產品添加到購物車。

但是我需要驗證是否選擇了變體。 驗證工作正常，但提交無效。

JS ：

function submitForm() {
    if ($('#variants').val() !== '') {
        $(this).closest('form').submit();
    } else {
        alert("You need to pick variant");
    }
}

HTML ：

<form id="form" action="FormPost.aspx">
    <select name="variants" id="variants" class="variants">
        <option value="">Select variant</option>   
        <option value="Black">Black</option>
        <option value="White">White</option>
        <option value="Red">Red</option>
    </select>
    <a href="javascript:submitForm();" class="addToCart buybtn_small text-left pull-right">Buy</a>
</form>

JSFiddle

Answer 1

您應該始終嘗試使腳本不引人注意 。
改用jQuery的.click()方法：

$('.addToCart').click(function(e){
    e.preventDefault();
    var form = $(this).closest('form');

    // to access the select by tag name:
    if (form.find('select').val()) {

    // to access the select by class:
    // if (form.find('.variants').val()) {

        form.submit();
    } else {
        alert("You need to pick variant");
    }
});

HTML：

<form id="form" action="FormPost.aspx">
    <select name="variants" id="variants" class="variants">
        <option value="">Select variant</option>   
        <option value="Black">Black</option>
        <option value="White">White</option>
        <option value="Red">Red</option>
    </select>
    <a href="#" class="addToCart buybtn_small text-left pull-right">Buy</a>
</form>

Answer 2

jQuery找不到您的表單，請改用此表單：

$('form#form').submit();

這是經過更新的小提琴，已經過調整：

http://jsfiddle.net/y5ytrcuq/

（我添加了jQuery參考，使您的submit函數成為window一部分，並更改了上面的行）

Answer 3

您應該使用jQuery .submit（）方法和一個Submit按鈕。 提交按鈕是提交表單的標准化方法，它對於語義和可訪問性更好。

此方法檢測使用“提交”按鈕提交表單的時間（比僅檢測對鏈接的單擊要好，並且比將代碼放入href屬性更好）。
您可以向其傳遞執行檢查的功能。 然后您使用事件的preventDefault()方法取消提交：

$( "#form" ).submit(function( event ) {
  if($("variants").val() == "")
  {
    //Something is wrong, display a warning and stop the submit action
    alert("You need to chose a variant")
    event.preventDefault();
  }
  //Everything is ok, the submit action happens normally
});

如果event.preventDefault(); 不稱表單是正常提交​​的。 如果您不必查找被單擊的代碼，則更改多種表單的代碼將更加容易。
這是JsFiddle： https ://jsfiddle.net/k3zmon2d/3/