如果我提交使用当前 html 中的 ajax 响应附加的表单，javascript 验证失败

Question

对我的英语表示歉意。我的 Java 脚本验证失败，如果字段为空，则阻止表单上传，实际上它可以查找 HTML 中是否已存在(即用于添加部分)。

如果我附加相同的表单，调用内部具有相同字段的相同 Java 脚本验证函数，唯一的区别是我使用来自某个 PHP 页面 (add_selection_ajax.php) 的 AJAX 响应附加此表单，因为我这次需要在该表单上从数据库加载值，并且我需要使用 AJAX 附加它，这是我必须以这种方式工作的项目的限制。

这是函数调用 AJAX:

function editSelectionOptn(sel_optn_id)
    {
        $.ajax({
          type: 'POST',
          url: 'add_selection_ajax.php',
          data: { sel_optn_id:sel_optn_id},
          success:function(data){
            // alert(data);
             $("#edit").append(data);
             document.getElementById('edit').style.display = 'block';
             document.getElementById('exposeMask').style.display = 'block';

           }
        });
    }

Java 脚本验证:

function validateInputOptn()
{

    alert(document.sel_optn.image_thumb.value);
    alert(document.sel_optn.image_thumb.value);
    if (document.sel_optn.image_thumb.value==null || document.sel_optn.image_thumb.value=="")
    {
        alert("Please select thumbnail image.");
        document.sel_optn.image_thumb.focus();
        return false;
    }
    if (document.sel_optn.image.value==null || document.sel_optn.image.value=="")
    {
        alert("Please select image.");
        document.sel_optn.image.focus();
        return false;
    }
    if (document.sel_optn.selection_optn_title.value==null || document.sel_optn.selection_optn_title.value=="")
    {
        alert("Please enter subcatagory title.");
        document.sel_optn.selection_optn_title.focus();
        return false;
    }


}

add_selection_ajax.php:

if(isset($_POST['sel_optn_id']) && is_numeric($_POST['sel_optn_id']))
    {
        $table=" tbl_selection_options";
                $optn_sel_id=$_POST['sel_optn_id'];
                $db->selectQuery($table,"where id='".$_POST['sel_optn_id']."'","id, option_title, option_img, selection_id");
                $value=mysql_fetch_assoc($db->result);
?>
                <h3>Edit Selection</h3>

                <!-- input form. you can press enter too -->
                <form action="" name="sel_optn" id="sel_optn" method="post"  onsubmit="return validateInputOptn();" enctype="multipart/form-data">
                    <input type="hidden" name="id" id="id" value="<?=$_POST['sel_optn_id']?>" />
                    <input type="hidden" name="selection_id" id="selection_id" value="<?=$value['selection_id']?>" />
                    <input type="hidden" name="page_start" value="<?php if(isset($_GET['start'])) echo $_GET['start']; ?>" />
                    <p>Thumbnail (100 x 100) <input type="file" name="image_thumb" id="image_thumb" value="" ></button></p>
                    <p>Large Image (750 x 515) <input type="file" name="image" id="image" value=""> Browse </button></p>
                    <p>Title: <input type="text" name="selection_optn_title" id="selection_optn_title" value="<?php if(isset($value['option_title'])) echo $value['option_title']; ?>" class="overlay-input" />
                    <button type="button" class="close" onClick="cancle()"> Cancel </button>
                    <button type="submit"> Save </button></p>
                </form>
<?php
    }

这是包含表单添加和编辑部分的 HTML 页面。添加零件验证工作正常。它还调用与编辑调用相同的 JavaScript 函数。

edit_selection.php

<div class="modal" id="add">
  <h3>Add Selection</h3>


  <form action="" name="sel_optn" id="sel_optn" method="post" onsubmit="return validateInputOptn();"  enctype="multipart/form-data">
    <input type="hidden" name="selection_id" id="selection_id" value="<?php if(isset($_GET['id'])) echo $_GET['id']; ?>" />
    <p>Thumbnail (100 x 100) <input type="file" name="image_thumb" id="image_thumb" value="" ></button></p>
    <p>Large Image (750 x 515) <input type="file" name="image" id="image" value=""> </button></p>
    <p>Title:  <input type="text" name="selection_optn_title" id="selection_optn_title" value="" class="overlay-input" />
    <button type="button" class="close"> Cancel </button>
    <button type="submit"> Save </button></p>

  </form>


</div>


<div class="modal" id="edit">



</div>

添加和编辑部分在页面加载时保持隐藏状态，仅在单击页面上的添加或编辑按钮后才会出现

即使我使用jquery的.live()函数，因为新版本的jquery已弃用它，所以我必须使用.on()函数，但是 .on() 函数也不起作用。 请帮助我。

Answer 1

由于您使用 ajax 创建新元素，jQuery 不知道它们，因为他正在 $( document ).ready 上应用(在页面加载时)。

如果您希望 jQuery 验证脚本正常工作，您需要在 DOM 中确定更大、更高的范围(尚未更改)，然后沿着 DOM 查找新创建的元素并对它们应用验证模式。