How to validate HTML Input?

Forums Dynamic Forms for SharePoint How to validate HTML Input?

Tagged: 

Viewing 3 reply threads
  • Author
    Posts
    • #33827
      Harsh
      Participant

      Hello there!
      I was added one new html input in my DFFS form header and i want to use this input box for Title(require column) of List.
      I was put this Input box in header section because i want to put this at very top along with some design and background.
      Now, I want to validate this input box when user click on save button, I was simply hided Title fields that i was add through form.

      So, how can i validate this input box on save, also how can i remove error message?

      Code on header:
      <input type=”text” id=”newProjectTtl”></input>

    • #33840
      Alexander Bautz
      Keymaster

      Hi,
      You must use some custom js – like this example:

      function dffs_PreSaveAction() {
          var projectTitle = jQuery("#newProjectTtl").val();
          if(projectTitle === ""){
              jQuery("#newProjectTtl").css({"background-color":"#fde7e9"});
              spjs.dffs.alert({
                  "title": "Missing project title",
                  "msg": "Please supply the title of the project in the highlighted input field.",
                  "ok": function(){
                      // close dlg
                  }
              });
              return false;
          }
          return true;
      }

      I’m not sure what you mean by “how can i remove error message” – please clarify.

      Let me know if you have any questions.

      Alexander

    • #33846
      Harsh
      Participant

      Thanks for reply Alexander,

      But some how i can not call this method while clicking save button,
      Let me explain this again,
      Please find attached image, i am using one header on form and i want title field into this header, I can not move my OOTB title field into header, i am correct?
      so, i just simply create one input box in header.
      In custom js i write code to hide OOTB title.

      
      
      function dffs_Ready() {
      $('#dffs_Title').hide();
      $('#newProjectTtl').on('change', function () {
              $('#dffs_Title').find('input').val(this.value);
          });
      //other codes
      };

      So, now when i try to save form without entring title into this field, it will not save the form, so at this time i want to validate my custom input box along with error message just like OOTB title error message.

      I tried below code but it is not working, can you please help me with this?

      
      
      function dffs_Ready() {
      $('#dffs_Title').hide();
      $('#newProjectTtl').on('change', function () {
              $('#dffs_Title').find('input').val(this.value);
          });
      //other codes
      };
      function dffs_PreSaveAction() {
          alert("pre save call");
          var projectTitle = jQuery("#newProjectTtl").val();
          if(projectTitle === ""){
              jQuery("#newProjectTtl").css({"background-color":"#fde7e9"});
              spjs.dffs.alert({
                  "title": "Missing project title",
                  "msg": "Please supply the title of the project in the highlighted input field.",
                  "ok": function(){
                      // close dlg
                  }
              });
              return false;
          }
          return true;
      }

      Thanks.

      • This reply was modified 6 months, 3 weeks ago by Harsh.
      Attachments:
    • #33852
      Alexander Bautz
      Keymaster

      The problem is that the Title field is required – and the built in validation of all required fields are performed before the dffs_PreSaveAction function is triggered. When a field is empty, the function will never be triggered.

      This means you must either remove the required flag on the title field in your list settings, or you must add a dummy / placeholder value to the Title field on form load – something like this:

      setFieldValue("Title", "...");

      Alexander

Viewing 3 reply threads
  • You must be logged in to reply to this topic.