Question

我已经搜索了几个小时的解决方案，但在我的案例中我找不到任何有用的东西......

所以，我有一个带有id的表单，表单中的输入带有required属性。我还有一个javascript函数，通过AJAX将表单数据发送到PHP服务器。

我想要的是：当我点击我的验证按钮时，JS函数启动并检查表单是否正确填充（就像正常提交一样）。如果不是我想要显示所需的输入消息，并且我的功能要停止。如果是的话，我希望我的功能继续下去。

这是我的HTML代码的简化版本：

<form id="myform">
   <input type="text" id="myinput" required />
   <img src="img/some_img.png" onClick="do_js();" />
</form>

和Javascript代码：

function do_js()
{
   /* getting my form */
   var myform = document.getElementById('myform');

   /* HERE I want to check if my form is correctly filled */
   /* but not with a custom validation, I want the HTML5 required stuff to activate */
   /* then IF my form is okay, i want to send data through ajax */

   /* getting my data */
   var some_value = document.getElementById('myinput').value;

   /* sending my data */
   xhr.open('POST', 'ajax_page.php', true);
   xhr.onreadystatechange = function() { /* result stuff */ };
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xhr.send('myvalue='+some_value);
}

我正在使用PLAIN JAVASCRIPT（不使用jQuery）。

Answer 1

使用活动onSubmit。

HTML：

<form onsubmit="return myFunction()">
  <input type="submit" value="">
</form>

CSS：

.form input[type=submit]{
  background:url(img/some_img.png) top right no-repeat;
}

JS：

function myFunction(){
  if(/*Your conditions to validate form*/){
    /* send your form with ajax here */
  }else{
    /* create your error message here */
  }

  return false; // for not reload your page
}

使用javascript激活HTML5所需的验证并获得结果

1 个答案: