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

我已经寻找了几个小时的解决方案，但我找不到任何对我有帮助的

因此，我有一个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（不是jQuery）。

使用事件

HTML:

JS:

---

这不正是默认的浏览器行为吗？如果验证没有通过，它不会发送表单，我建议您在浏览器中执行简单的验证（阻止提交），而复杂的服务器端验证应该在提交后执行（并产生反馈）。另一种选择是提交表单

onSuccess（）

（回调应该提供它是否通过的信息，但这仍然可以由JS专家操作）对不起，我的错。。在这种情况下，您不应该添加do_js，但您应该在submit（）上有这个

<代码>

对吗。。？我想如果你想让表单验证生效，你必须提交表单，而不是手动调用ajax。你可以使用form.checkValidity（）和input.validity.valid提前告知。我想我会尝试在我的JS函数中使用

checkValidity（）

。但是，为了显示“required”消息，我执行了一个

myform.submit（），在我将
onSubmit=“return false；”
放在表单上之后。但我的页面仍在刷新。。。我不明白为什么。事实上，我真正想要的是动态显示HTML5“必需”消息。谢谢你的回答。但是，我真的不希望页面刷新。我猜在
返回true
的情况下，表单将正常提交，页面将刷新。我希望我的页面保持不变，我的数据通过Ajax发送，但如果输入没有正确填写，我还希望显示“必需的消息”（在HTML5中）。抱歉，如果我的问题不够清楚：（@PiTiNiNjA我的错，我更新了我的答案。如果你有关于如何创建消息错误或如何正确验证并发送表单的问题，请告诉我。好吧，非常感谢，伙计，这样就可以了！我很接近，但还不够。真的，谢谢你的帮助。：）
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);
}

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

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

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
}