javascript - 无法同时验证表单和调用函数 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() 中 claim 金额和总金额的引用