Question

我仍然相对较新使用jquery，我试图阻止表单提交，如果记录列表中的任何值的数量为零，并显示一条消息，标识哪些记录为零量。

这是我到目前为止所做的：

<script type="text/javascript">
    var j$ = jQuery.noConflict();

    j$(document).ready(function() {
        j$('[id$=btnSubmit]').click(function(e){
            j$('[id$=documentQuantity]').each(function(index){
                if(j$(this).text() == '0') {
                    j$("#contentQtyError").css({"display":"inline"});
                    j$(this).parent().parent().css({"background-color":"#FFFFCC"});
                    e.preventDefault();
                }
            });
        });
    });  

</script>

我已经捕获了按钮单击，如果列表中的某个值为零，我也成功捕获了。如果其中一个值为零，如何停止提交表单？我是否使用preventDefault（）方法？另外，如何在页面上显示一条消息，指示哪一行（记录）是数量为零的行？理想的是突出显示零数量的行。

感谢您的帮助！

Answer 1

您应该使用表单提交事件执行验证。使用e.preventDefault();或return false;来阻止默认操作

j$(document).on('submit', 'form#YourFormID', function (e) {
    console.log('************** we clicked the submit button');
    j$('[id$=documentQuantity]').each(function (index) {
        if (j$(this).val() == 0) {
            console.log('************* value is zero');

            //To prevent form submission
            return false;
        }
    });
});

注意：代替form#YourFormID'提供正确的选择器。如果您的单一表单只有form就足够了

Answer 2

尝试preventDefault

var j$ = jQuery.noConflict();

j$(document).ready(function() {
   //Assuming you have only one form in the document, if not change the selector to be specific to the form you want to target.
    j$('form').on('submit', function(e){
        console.log('************** the form is being submitted');
        j$('[id$=documentQuantity]').each(function(index){
            if(j$(this).val() == 0) {
                console.log('************* value is zero');
                e.preventDefault();  
            }
        });
    });
});

Answer 3

var j $ = jQuery.noConflict（）;

j$(document).ready(function() {
    j$('[id$=btnSubmit]').submit(function(e){
        console.log('************** we clicked the submit button');
        j$('[id$=documentQuantity]').each(function(index){
            if(j$(this).val() == 0) {
                console.log('************* value is zero');
                 e.preventDefault(); //it will prevent the form submission
                //below will display the warning message
                j$(this).append("<span class='message'>this value can not be left blank</span>");
            }
        });
    });
});

阻止表单提交并显示错误消息

3 个答案: