Applying jQuery validation to a SharePoint visual webpart

StackOverflow https://stackoverflow.com/questions/23489584

Вопрос

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.

Это было полезно?

Решение

You should return false from the function

 function createSite() {
         $("#CreateForm").valid();
         return false;

    }

Другие советы

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).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top