Question

我有一个输入字段和一个按钮。单击该按钮时，我想调用HTML样式字段验证错误消息。由于这个原因，我将输入和字段包装成表格。

    <form id="frmShippingHeader">
     <input name="trailerNumber" id="trailerNumber" class="form-control fireChange" type="text"  aria-describedby="enter Part Number" placeholder="Trailer Number" required>
     <button class="btn btn-success" id="btnCreateShipping" onClick="createShippingOrder()">Create Shipping Order</button>
   </form>

使用我的JavaScript，我想检查表单是否有效。如果表格有效，我将阻止默认设置，并且不需要错误消息。如果表单无效，我不想阻止默认设置。但是，即使我将输入字段留空并单击按钮，blnFormValidity也会返回true

$("#btnCreateShipping").click(function(e){

    blnFormValidity= $('#frmShippingHeader')[0].checkValidity()
    console.log(blnFromValidity)

    if(blnFormValidity==true){
        e.preventDefault();
        return false
    }

})

Answer 1

您在这里有拼写错误

blnFormValidity= $('#frmShippingHeader')[0].checkValidity()
console.log(blnFromValidity)

blnFromValidity is different than blnFormValidity

除此之外，您可以使用jquery validate插件进行验证。 jquery validation

然后您可以直接检查表单验证

$("#btnCreateShipping").click(function(e){

    console.log($("#frmShippingHeader").validate());
 })

这很容易，可以为您提供更多功能。希望有帮助

Answer 2

这对我有用，并打印了var jobNum = [] var jobList = [] var activityName = [] var activityList = [] for(var i=0; i<vehicleHistoryList.length;i++) { if(jobNum.indexOf(vehicleHistoryList[i].jobNumber)==-1) { jobNum.push(vehicleHistoryList[i].jobNumber) jobList.push({jobNum:vehicleHistoryList[i].jobNumber,activities:[]}) if(activityName.indexOf(vehicleHistoryList[i].activityName)==-1) { activityName.push(vehicleHistoryList[i].activityName) activityList.push({jobNum:vehicleHistoryList[i].jobNumber,activityName:vehicleHistoryList[i].activityName,material:[],labour:[]}) var index = activityList.map(function (img) { return img.activityName; }).indexOf(vehicleHistoryList[i].activityName); if(vehicleHistoryList[i].material =="Material") { activityList[index].material.push(vehicleHistoryList[i].description); } else { activityList[index].labour.push(vehicleHistoryList[i].description); } } else { var index = activityList.map(function (img) { return img.activityName; }).indexOf(vehicleHistoryList[i].activityName); if(vehicleHistoryList[i].material =="Material") { activityList[index].material.push(vehicleHistoryList[i].description); } else { activityList[index].labour.push(vehicleHistoryList[i].description); } } } else { var index = jobList.map(function (img) { return img.jobNum; }).indexOf(vehicleHistoryList[i].jobNumber); console.log(index) if(activityName.indexOf(vehicleHistoryList[i].activityName)==-1) { activityName.push(vehicleHistoryList[i].activityName) activityList.push({jobNum:vehicleHistoryList[i].jobNumber,activityName:vehicleHistoryList[i].activityName,material:[],labour:[]}) var index = activityList.map(function (img) { return img.activityName; }).indexOf(vehicleHistoryList[i].activityName); if(vehicleHistoryList[i].material =="Material") { activityList[index].material.push(vehicleHistoryList[i].description); } else { activityList[index].labour.push(vehicleHistoryList[i].description); } } else { var index = activityList.map(function (img) { return img.activityName; }).indexOf(vehicleHistoryList[i].activityName); if(vehicleHistoryList[i].material =="Material") { activityList[index].material.push(vehicleHistoryList[i].description); } else { activityList[index].labour.push(vehicleHistoryList[i].description); } } } }

true

如果要编写100％有效的代码，请使用webstorm

Answer 3

更正现有代码：每个人都提到您的变量只是拼写错误。因此，只需更正该问题即可。
添加：在您的html表单中，您正在调用onclick事件中的方法，请记住，如果您对{{1} }方法，请将其删除，否则您可能无法按顺序获得期望的结果，因为事件绑定-createShippingOrder(...)，并且在click上调用方法将导致您出现问题，例如发生意外的事情。要解决此问题，您可以在方法内部收集点击事件的功能，反之亦然。选中Your corrected code-jsFiddle。

您还可以使用JQuery表单验证器，它非常方便：

onclick

jQuery表单验证：

 <form id="frmShippingHeader">
     <input name="trailerNumber" id="trailerNumber" class="form-control fireChange" type="text"  aria-describedby="enter Part Number" placeholder="Trailer Number" >
     <button type="button" class="btn btn-success" id="btnCreateShipping" >Create Shipping Order</button>
   </form>

checkvalidity始终为必填字段返回true

3 个答案: