时间戳

首页 > 解决方案 > 通过某些表单验证来防止 ajax 调用

javascript - 通过某些表单验证来防止 ajax 调用

问题描述

我有一个带有 ajax 调用的工作 javascript 函数，并且 post 调用在按钮提交时完美运行。

我只是想添加一些验证，但即使输入无效，它仍然会提交 ajax 并刷新页面。

我在这里要做的就是确保数字字段只是数字并且所有必填字段都不为空，但是如果我使用空输入对其进行测试，或者将“一”放在需要数字的字段之一中（如与'1'相反）它仍然调用ajax，它插入记录，然后刷新页面。我应该使用每个输入字段的 ID 而不是我已经为输入“名称”设置的变量来执行 if 语句吗？

$("#save").click(function(e){

    e.preventDefault();

    var name = $("input[name=name]").val();
    var IDNumber = $("input[name=IDNumber]").val();
    var IDName2 = $("input[name=IDName2]").val();
    var IDNumber2 = $("input[name=IDNumber2]").val();
    var Number3 = $("input[name=Number3]").val();
    var ExtraName = $("input[name=ExtraName]").val();
    var category = $("input[name=category]").val();

    if(isNaN(IDNumber) || isNaN(IDNumber2) || isNaN(Number3)){
        alert('Fields must be numeric');
    }else if(name == '' || 
            IDNumber == '' || 
            IDName2 == '' || 
            IDNumber2 == '' || 
            Number3 == '' || 
            ExtraName == '' || 
            category == '')
    {
        alert('You must fill out all required fields';)
    }else{

        //perform the working ajax
    }
}

标签： javascriptjqueryhtmlajax

解决方案

分号位于缺少必填字段的警报方法中。再试一次，看看它是否有效！如果它是一个提交事件而不是单击，那就更好了。假设您的选择器用于按钮，选择器应该在表单上而不是在按钮上。

$("#save").submit(function(e){ /* Should be a submit event */

    e.preventDefault();

    var name = $("input[name=name]").val();
    var IDNumber = $("input[name=IDNumber]").val();
    var IDName2 = $("input[name=IDName2]").val();
    var IDNumber2 = $("input[name=IDNumber2]").val();
    var Number3 = $("input[name=Number3]").val();
    var ExtraName = $("input[name=ExtraName]").val();
    var category = $("input[name=category]").val();

   if(isNaN(IDNumber) || isNaN(IDNumber2) || isNaN(Number3)) {
        alert('Fields must be numeric');
    } else if(name == ''|| IDNumber == '' || IDName2 == '' || IDNumber2 == '' || Number3 == '' || ExtraName == '' || category == '') {
        alert('You must fill out all required fields'); /* Put semicolon outside */
   } else {
        /* AJAX CODE HERE */
   }
}); /* another syntax error right here */

推荐阅读