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