You should return false from the function
function createSite() {
$("#CreateForm").valid();
return false;
}
Pregunta
I have a SharePoint visual web part in which I'm trying to use "HTML" elements in the page.
<script src="../_layouts/15/CreateInitiativesCSOM/jquery-1.10.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="../_layouts/15/SP.js"></script>
<script type="text/javascript" src="../_layouts/15/sp.runtime.js"></script>
<script src="../_layouts/15/CreateInitiativesCSOM/CreateInitiatives.js"></script>
<body>
<form id="CreateForm" novalidate="novalidate">
<label for="Workspace_Name">Workspace Name</label>
<input type="text" name="Workspace_Name"/><br />
<label for="Description">Description</label>
<input type="text" name="Description" /><br />
<label for="PeoplePicker">Owner Name</label>
<spuc:PeopleEditor name="PeoplePicker" runat="server" Width="350px"
AllowEmpty="true" MultiSelect="true" SelectionSet="User" />
<br />
<input type="submit" name="Create Workspace" value="Create Workspace" onclick="createSite();" />
<input type="reset" name="reset" value="Reset" onclick="this.Form.clear();" />
</form>
</body>
I want to validate this form using jquery.validate.js
This is the code which i use to validate the form:
$(document).ready(function () {
$("#CreateForm").validate({
rules: {
Workspace_Name: "required",
Description: "required",
PeoplePicker: "required"
},
messages: {
Workspace_Name: "Please enter the Workspace Name",
Description: "Please enter the Description",
PeoplePicker: "Please enter the Owners for the Workspace"
}
});
function createSite() {
$("#CreateForm").valid();
}
}
When I click the button it just post backs and nothing happens. How to resolve this issue?
Please help.
Solución
You should return false from the function
function createSite() {
$("#CreateForm").valid();
return false;
}
Otros consejos
You can add "return false" in your function, but as you're using jQuery you can even do something prettier:
$('#CreateForm').on('click',':submit',function(event) {
event.preventDefault();
createSite()
})
That way you bind your submit button with jQuery for the CLICK action. And then with event.preventDefault()
you stop the default action of the brower (that is posting the form).