I am trying to create custom content Editor webpart with HTML and JS code. I am simply adding item in list using REST API. I've given validation to textboxes using JQuery. Here is the code:
JS
$(function() {
$("form").validate({
rules: {
txtStoreName: "required",
txtStoreContact: "required",
txtStoreOwner: "required"
},
messages: {
txtStoreName: "Please enter your store name",
txtStoreContact: "Please enter your store contact",
txtStoreOwner: {
required: "Please provide a store owner"
}
},
});
$("#BtnSubmit").click(function(){
if($("form").valid())
{
$("form").submit();
}
});
});
and HTML:
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<label value="Store Name"> Store Name</label>
</td>
<td>
<input type="text" name="txtStoreName" id="txtStoreName">
</td>
</tr>
<tr>
<td>
<label value="Store Name"> Store Contact</label>
</td>
<td>
<input type="text" name="txtStoreContact" id="txtStoreContact">
</td>
</tr>
<tr>
<td>
<label value="Store Name"> Store Owner</label>
</td>
<td>
<input type="text" name="txtStoreOwner" id="txtStoreOwner">
</td>
</tr>
<tr>
<td>
<button type="button" text="Submit" id="BtnSubmit">Submit</button>
</td>
</tr>
</table>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
</html>
Now When I click on any button outside form, validation fires. E.g. When I click on edit button form s4-navbar validation get fire. I've also attached Screenshot for same.
