無法同時驗證表單和調用功能onclick提交按鈕

Question

我的表格寫成如下：

<div id="up">
<center>
<p >
<h3> Reimbursement Form For Employee Day Care</h3>
</center>


<form action="./ssoServlet?from=amount" method="post">

<input type="hidden" name="formName" value="DayCareForm" >
<center>
<table>
<tr>
<td> Date </td>
<td> <input type="text" name="date" id="date" readonly>
</td>
</tr>
<tr>
<td> Name </td>
<td> <input type="text" name="name" id="name"> </td>
</tr>
<tr>
<td> Department </td>
<td> <input type="text" name="department" id="department"> </td>
</tr>
<tr>
<td> Designation </td>
<td> <input type="text" name="designation" id="designation"> </td>
</tr>
<tr>
<td> Name of the Day Care</td>
<td> <input type="text" name="daycare" id="daycare" required> </td>
</tr>
<tr>
<td> Name of the Child </td>
<td> <input type="text" name="childName" id="childName" required> </td>
</tr>
<tr>
<td> Date of Birth </td>
<td> <input type="date" name="dob" id="dob" onchange="ageCalculation()"  required> </td>
</tr>
<tr>
<td> Age </td>
<td> <input type="text" name="age" id="age" required readonly> </td>
</tr>
<tr>
<td> Amount  </td>
<td> <input type="text" name="amount" id="amount" onchange="dayCareAmount()" required > </td>
</tr>
 <tr>
<td> Total amount claimed </td>
<td> <input type="text" name="total" id="total" required> </td>
</tr> 
</table>

</center>

<p>

 *(Employee to attach birth certificate of the child on claiming reimbursement for the first time) 
 <hr>
<br>

<font color="red">Maximum of INR 2000 p.m. </font> 

<br>


 I hereby declare that all the information provided above is correct. <br><br>
Signature of Applicant: ......................................................... <br>
<hr>
<br>
Signature of Manager: ......................................................... <br>
<hr>
Receipt of the Day Care
<br>
<br>
Signature of Finance Controller <br>
<hr>
Signature of Vice President & Managing Director: <br>
<br>
<br>
<br>
Approved/Not Approved: .........................................................


<br>
<p> Note: -  <br>
Employees to ensure that the DAY CARE Center is registered under shop act establishment.
<br>
Employees will be responsible towards the safety of the child and company holds no obligation.   
</p>

<div id="down">
<button onclick="dayCarePdf()" type="submit"> Convert to PDF </button>
</div>
</form>
</div>

我有以下功能來在我的.js文件中生成pdf

function dayCarePdf(){


     var doc = new jsPDF();  
            doc.setFontSize("15");
        doc.setFontType("bold");  
        doc.text(85, 35, 'IDeaS INDIA');  
        doc.text(50, 42, 'Reimbursement Form For Employee Day Care');
        doc.setFontType("normal");  
        doc.setFontSize("12");
        doc.text(50, 58, 'Date');  
        doc.text(50, 68, 'Name');  
        doc.text(50, 78, 'Department');  
        doc.text(50, 88, 'Designation');  
        doc.text(50, 98, 'Name of the Day Care  ');  
        doc.text(50, 108, 'Name of the Child');  
        doc.text(50, 118, 'Date of Birth');  
        doc.text(50, 128, 'Age');  


--etc etc
doc.save('DayCareForm.pdf');
}

pdf正確生成。 當我單擊“轉換為pdf”按鈕時，我希望僅在所有字段都填充且不為空白時才生成pdf。 但是，我得到了我想要的文本字段的注釋“請填寫此字段”，但是pdf也同時生成。 如果沒有輸入字段，我不希望調用daycarepdf函數

Answer 1

您在功能dayCarePdf（）中缺少金額和總索賠額的參考

Answer 2

由於需要阻止button type="submit"默認行為，否則它將提交表單。

驗證完成后，您可以使用ajax來執行action

function dayCarePdf(event){
    event.preventDefault()
     // Rest of the code
    doc.save('DayCareForm.pdf');
}

Answer 3

你可以做這樣的事情...

{

    $('#submit_btn').on('click', function() {
        $("#form_id").valid();
    });

}

Answer 4

當我編寫以下代碼時，驗證和pdf生成可以同時工作：

function dayCarePdf(){

    if(document.getElementById("daycare").value=="" || document.getElementById("childName").value=="" || document.getElementById("dob").value==""
        || document.getElementById("age").value=="" || document.getElementById("amount").value=="" || document.getElementById("total").value=="")
    {
        //alert("Please fill all the data required");
        return false;
    }
    else{
     var doc = new jsPDF();
 --- etc etc
doc.save('DayCareForm.pdf');}
}