Question

我有一个函数来对一个表格求值，并与另一个值进行比较。

HTML：

<input class="fieldToValidate" name="option-quantity">
<input class="fieldToValidate" name="option-quantity">
<input class="fieldToValidate" name="option-quantity">
<input class="fieldToValidate" name="option-quantity">

<button type='button' id="button-cart">Add To Cart</button>
<div class="errorQuantity"></div>

JS：

$('#button-cart').on('click', function()
{
    var MaxSelectionNum = "7";
    var sum = 0;

    // Loop through all inputs with names that start
    // with "option-quantity" and sum their values
    $('input[name^="option-quantity"]').each(function()
    {
        var val = $(this).val() || 0;
        if(val != 0) {
          val = val.replace('.', '');
          val = val.replace(',', '.');
          val = parseFloat(val);
        }

        console.log(val);
        sum += val;
    });

    if (sum < MaxSelectionNum)
    {
        $(".errorQuantity").html("Please select 7 meals").show();
    }
    else
    {
        $(".errorQuantity").html("You have select greater than 7: meal count:  " + sum).show();
    }
});

这项工作，但我想在提交前验证表单。

如果总和＆lt; 7，不要提交。

我该怎么做？

谢谢！

Answer 1

您必须将输入放在表单中，并在验证后在脚本中调用submit。

HTML：

<form ip='my-form'>  
    <input class="fieldToValidate" name="option-quantity">
    <input class="fieldToValidate" name="option-quantity">
    <input class="fieldToValidate" name="option-quantity">
    <input class="fieldToValidate" name="option-quantity">

    <button type='button' id="button-cart">Add To Cart</button>
    <div class="errorQuantity"></div>  
</form>

JS：

if (sum < MaxSelectionNum)
{
    $(".errorQuantity").html("Please select 7 meals").show();
}
else
{
    $('#my-form').submit();
}

注意：您应该更改输入的名称。

希望这有帮助。

Answer 2

您可以在表单的.submit()事件上触发验证功能。

<form id='my-form' action="your action goes here">  
    <input class="fieldToValidate" name="option-quantity">
    <input class="fieldToValidate" name="option-quantity">
    <input class="fieldToValidate" name="option-quantity">
    <input class="fieldToValidate" name="option-quantity">

    <input type="submit" value="Add to Card" />
    <div class="errorQuantity"></div>  
</form>

    $(function(){
    $("#my-form").submit(function(){
        var maxSelectionNum = "7";
        var sum = 0;
        $("input:text[name='option-quantity']").each(function(index, val) {
            sum += parseInt(this.value, 10);
        });

        if (sum >= maxSelectionNum) {
            return true;
        } else {
            $(".errorQuantity").html("Please select 7 meals").show();
            return false;
        }
    });
});

JSFIDDLE

表单输入和条件javascript提交

2 个答案: