Question

我有点击html按钮时生成的表单。

这是代码。

<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
  </head>       
  <script type="text/javascript">
  function myFunction()
  {
    alert("Hello World!");
  }
  function createDoc()
  {
    var w=window.open('','','width=400,height=300');
    w.document.open();w.document.write("<table width=350 height =200 <tr><td align=center>");
    w.document.write("<table width=300 height =200 ><tr><td>");
    w.document.write("<form class='commentform' action='hiii.php' method='GET'>");
    w.document.write("<input type='hidden' name='pcode' value='00214'>");
    w.document.write("<label>Name:</label></td><td><input type='text'id='pname' name='pname'   value=''>");
    w.document.write("</td></tr><tr><td>");
    w.document.write("<label>Email Address:</label></td><td><input type='text' name='pemail' value=''/>");
    w.document.write("</td></tr><tr><td>");
    w.document.write("<label>Mobile number:</label></td><td><input type='text' name='pnumber' value=''/>");
    w.document.write("</td></tr><tr><td align=center>");
    w.document.write("<input type='submit'  onclick='validate()' name='submit' value='Submit'/>");
    w.document.write("</form>");w.document.write("</td></tr>");
    w.document.write("</td></tr></table>");
    w.document.write("</td></tr></table>");
    w.focus();w.document.close();
  }
  function validate(){
    var pname = $('#pname').val();
    alert(pname);
  }
  </script>
  <input type="button" value="Click to Connect" onclick="createDoc()">
</html>

点击“点击连接”按钮即可获得包含表格的弹出窗口。

我正在尝试对动态生成的字段应用验证，但是直接提交表单而不是获取警报，请告诉我这里可能出错的地方。

我希望命令在提交表单

之前应该进入我的验证功能

Answer 1

您可以使用event.preventDefault()取消默认操作。也许这样的事情。只需将event传递给validate方法即可。并在验证函数中调用event.preventDefault()。

<script type="text/javascript">

$(document).ready(function() {
    createDoc();
}


function createDoc() {
    var w=window.open('','','width=400,height=300');
    w.document.open();w.document.write("<table width=350 height =200 <tr><td align=center>");
    w.document.write("<table width=300 height =200 ><tr><td>");
    w.document.write("<form class='commentform' action='hiii.php' method='GET'>");
    w.document.write("<input type='hidden' name='pcode' value='00214'>");
    w.document.write("<label>Name:</label></td><td><input type='text'id='pname' name='pname'   value=''>");
    w.document.write("</td></tr><tr><td>");
    w.document.write("<label>Email Address:</label></td><td><input type='text' name='pemail' value=''/>");
    w.document.write("</td></tr><tr><td>");
    w.document.write("<label>Mobile number:</label></td><td><input type='text' name='pnumber' value=''/>");
    w.document.write("</td></tr><tr><td align=center>");
    w.document.write("<input type='submit'  onclick='validate(event)' name='submit' value='Submit'/>");
    w.document.write("</form>");w.document.write("</td></tr>");
    w.document.write("</td></tr></table>");
    w.document.write("</td></tr></table>");
    w.focus();w.document.close();

}

function validate(e) {
e.preventDefault();

var pname = $('#pname').val();
alert(pname);
}

</script>

Answer 2

表单提交按钮仍在按原样执行，因此您需要停止运行验证的默认行为，然后让该功能在成功验证后继续提交过程。

可以使用带有jQuery的event.preventDefault（）等表单防止方法进行实验，但你应该真正利用其他已开发的jQuery库，这些库已经附带了一个函数来阻止表单被提交。

Answer 3

如果您不希望表单提交表单，请使用

<input type='submit'  onclick='return false; validate();' name='submit' value='Submit'/>

验证输入后，如果要提交表单，请使用

$('.commentform').submit();

Answer 4

为什么不在你写表之前你还包括脚本，因为你正在打开一个新窗口，如：

var w=window.open('','','width=400,height=300');
w.open();
w.document.write("<head> <script type='text/javascript'>
function validate(){
var pname = $('#pname').val();
alert(pname);}
</script></head>";
w.document.write("<table width=350 height =200 <tr><td a ...more code here

Answer 5

w.document.write("<input type='submit'  onclick='javascript: return window.opener.validate( event, window.document );' name='submit' value='Submit'/>");

onclick='javascript: return window.opener.validate( event, window.document );'

function validate(e, w) {
    var pname = $('#pname', w).val();
    alert(pname);
    e.preventDefault();
    return false;
}

请替换以上代码。我认为它会奏效。

JQuery验证不起作用

5 个答案: