2

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.

screenshot

2

First of all, your HTML should not contain <html><head></head><body>...</body></html>

Then whats happening here is that $("form").validate() messes with the already existing form that encloses everything on the page (<form id="aspnetForm">). Now you could adjust your HTML and wrap your inputs and labels etc. in an extra set of form tags but that's not allowed and will be stripped away anyway.

What you can do instead is assigning an ID to your table and execute $("#**id**").wrap("<form id='formID'>") after the page loaded

And then you let your $("#formID").validate() and $("#formID").valid() functions run.

Forms inside forms is not valid HTML but it should still work in your case.

  • That's the benefit of asking question on stack-overflow. you always get something new to learn when you ask. @Daniel : thank you for wonderful explanation. I didn't know about .wrap method of jquery till now. it's working for me now. – Ubiquitous Developers Sep 6 '16 at 6:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.