perform custom validation on custom html form against sharepoint list

Question

How to write the custom validation using jQuery in custom HTML form?

I have created a custom html form which has fields dropdown, single line of text, people picker,date, etc. and custom submit button.

But, I am stuck at how to perform custom validation using jsom/ jquery etc.?

1. Can i use spservices inside jsom ?
2. Can i use presaveaction on click of the custom submit button?
3. Also,i want to redirect the browser to a editForm.aspx page and need to populate with the newly created ID as a query string.

I have just started learning jsom coding in SPO(basically i am a SSOM guy !!), so any help is appreciated for guiding me.

   function bindButtonClick() {
        $("#btnSubmit").on("click", function () {
            addListItem();
        });
   }

Though I have written the above code , I am not able to get where to write custom validation, and if its success, how to redirect and fetch the last generatedID.

Answer 1

1. Yes. You can use SPServices inside of JSOM. SPServices works nice just about anywhere in your Custom JS. I have used it inside of REST calls and other JS services with SharePoint.

2. Yes, you can use the PreSaveAction() in your custom form. The trick to this is going to be making sure the master page is part fo your custom aspx page. This will not work if the core.js and the sp.js files are not loaded into your page. I would attach the master page to your custom form, and you should be able to call that class.

3. Yes, you can use the PreSaveAction() action on your custom button to change the redirect and pass parameters. Be sure to place and use the PreSaveAction() before any $(document).ready(function(){}); type calls or it will not work.

4. Take a look in DEV tools on your browser and look at a save button in an edit form. Pay attention to how the onclick function is set up to check for the PreSaveAction(). This will help you in getting it to work right with your custom button. All of the actions you are trying to do on button click should be executed from within the PreSaveAction(). Here is what a simple example would look like:

   <script type=:text/javascript" id="MyCustomJS">  
   //you will need to add the id in the script tag for master page controlled aspx files for SharePoint
        function PreSaveAction() {                 
            addListItem();
        }
        function addListItem(){
            yourSPServicesCode();
        }
   
   </script>
   

Be sure to add the references to your JS libraries (i.e. SPServices and jquery) into the <asp:Content ContentPlaceHolder="PlaceHolderAdditionalPageHead" runat="server"> placeholder. User the ScriptLink tag to reference your libraries as well. <SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/layouts/15/customjs/SPServices.js" runat="server" />

Here is a QueryStringParameter getter function for your consideration as well:

function getQueryStringParameters(name, url) {
    if(!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if(!results) return null;
    if(!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Just pass the name of the param you are looking for in the url to the function. You can pass the URL, but if you don't, it will grab the current URL to look for parameters. Hope this answers your questions correctly. Good luck!