How to set custom DIV error message using JavaScript

Question

On Validation error of columns I would like to set a custom div with an error message. I currently have the working code to populate the div however I do not know how to make the IF statement to show the message only when column validation fails.

    <script type="text/javascript">

    $(document).ready(function(){
    var div = document.getElementById('errorMessage');
    div.innerHTML = div.innerHTML + 'Error Message goes here';
    });

    </script>

I assume it would be a check against the html form-validation class however I haven't managed to get that to work.

Answer 1

There is a JavaScript function in SharePoint called "PreSaveAction" that is fired just before the item is validated and saved. You can use this function to call your function. For example:

function PreSaveAction(){
        var itemTitle = $("input[title='GUID']").val();
        if (itemTitle.length < 1) {
                alert("The Title Field Cannot Be Blank");
                $("input[title='Total']").attr("style", "border: solid 1px #ff4c42 !important");
                return false;
        }
    }

Please note, you should do complete validation of the item because if the item fails server side validation your function will have run but the item will not be saved (causing the user to fix the validation error, hit save again, and running your function again). This may not be important if you're only doing validation, but it's worth noting.

Answer 2

Use the PreSaveAction() that all forms check for before saving. true = validation succeeds and save the form, false = validation fails, alert the user.

<script type="text/javascript">

   function PreSaveAction(){
    var name = $("#name").text(); 
    if(!name)
    {
      var div = document.getElementById('errorMessage');
      div.innerHTML = 'Error Message goes here';
      div.show();
      return false;
    }
    return true;
    }
    </script>