Question

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

如果我追加相同的表单，调用相同的Java Script验证函数，其中只有不同之处在于我使用来自某个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页面。添加部件验证工作正常。它也调用了与编辑调用相同的Java Script函数。

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查找新创建的元素并应用验证模式。它们。

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

1 个答案: