使用 AJAX 验证表单输入的 JQuery 脚本

Question

我正在尝试编写一个脚本来在用户单击表单上的提交按钮时验证数据。本质上，我想检查新输入是否已在数据库中。

• 如果是，它必须告诉用户，然后退出该功能。
• 如果不是，则必须检查用户是否未提交空白字段。如果用户输入了空白字段，也必须退出该功能。

我可以让两个脚本彼此独立工作，但是当我尝试合并脚本来创建一个脚本时，如果找到条目或条目为空，它会继续提交条目并写入数据。我的故障排除警报告诉我需要知道的所有信息，但它似乎没有执行

return false;

并退出。

任何想法或帮助将不胜感激。

function ValidateMyForm() {
var MFormFieldCategoryName = document.forms["MyForm"]["FormFieldCategoryName"].value;
$.post("category_lookup_existing.cfm", {
        MFormFieldCategoryName: MFormFieldCategoryName
    },
    function(data) {
        // Callback Function Alert on number of records in DB Table
        alert("Existing Records = " + data);
        if (data > 0) {
            alert('Found existing entry')
            $('#FormFieldCategoryNameID').val("");
            return false;
        } else {
            alert('Entry Not Found')
            if (MFormFieldCategoryName == "") {
                alert("Please Input a Category Name.");
                $('#FormFieldCategoryNameID').focus();
                $('#FormFieldCategoryNameID').css({
                    "background-color": "#fff2e6"
                });
                return false;
            } else {
                $('#FormFieldCategoryNameID').css({
                    "background-color": "#fff"
                });
                var CheckProductName = "OK";
            }
            if (CheckProductName == "OK") {
                //$("#loading").show();
                //$("#LocationMain").hide();
                ShowSavingv2('L')
            }
        }
    });

}

Answer 1

最终工作脚本

这就是我最终的结果。检查该记录是否已在数据库中，如果是，则不会继续。如果用户提交空白条目，它会突出显示该条目并将其返回到输入字段。如果一切正常，不为空且不存在，则提交表单。

感谢您的帮助mplungjan

    $(function() {
    $("#CheckDBEntry").click(function() {
        var empID = document.forms["MyForm"]["FormFieldCategoryName"].value;
        $.post("category_lookup_existing.cfm", {
                EmpID: empID
            },
            function(data) {
                // This is my callack function
                //alert("Return data " + data);
                //$( "#content" ).html( data );
                //Check if data > 0 meaning existing entry
                if (data > 0) {
                    alert('Unable to Save Record (Existing)')
                    $('#FormFieldCategoryNameID').val("");
                    $('#FormFieldCategoryNameID').focus();
                    return false;
                } else {
                    var MFormFieldCategoryName = document.forms["MyForm"]["FormFieldCategoryName"].value;
                    // MFormFieldCategoryName
                    // MFormFieldCategoryName
                    // MFormFieldCategoryName
                    // MFormFieldCategoryName
                    // MFormFieldCategoryName
                    if (MFormFieldCategoryName == "") {
                        alert("Please Input a Valid Category Name.");
                        $('#FormFieldCategoryNameID').focus();
                        $('#FormFieldCategoryNameID').css({
                            "background-color": "#fff2e6"
                        });
                        return false;
                    } else {
                        $('#FormFieldCategoryNameID').css({
                            "background-color": "#fff"
                        });
                        var CheckCatName = "OK";
                    }
                    if (
                        CheckCatName == "OK"
                    ) {
                        //$("#loading").show();
                        //$("#LocationMain").hide();
                        ShowSavingv2('L')
                        $('form#myForm').submit();
                    }
                }
            });
        // to prevent the default action
        /* alert('here')*/
        return false;
    });
});