How to Implement Field Validation on Click of Submit button on Custom Form

Question

I've created a custom form in SPD 2013. On my form, I've got a series of required fields. I coded the OnClick feature of the "Submit" button of my form so that when a user submits the form, a success message along the lines of "Your new request has been submitted successfully." will pop up on the screen.

The problem is that by coding the OnClick function of the button, this message is popping up before the field validation of the required fields in my list is being done. So if a user doesn't fill out a required field, they are getting the error message and highlighted field AFTER they have gotten my success message from the OnClick.

Can someone please assist me in resolving this so that error validation is done before the success message pops up?

Answer 1

You can do something like this:

function click(){
    flag = formValidation(); // call function first to return values 
    if(flag == 1){
        alert('Your new request has been submitted successfully');
    }else{
        // some alert
    }
}

function formValidation(){
    // validate fields here
    // something like 
    if(val == ''){
        alert('this field is required');
        return 0;
    }
    else{
        return 1;
    }
}

Answer 2

Use PreSaveAction()

function PreSaveAction()
{
    var MyNumber = $('input[title="My Number"]').val();
    if( MyNumber == 0 )
    {
         return false;
         //dont save
    }


 return true;
 //save

}

http://social.technet.microsoft.com/wiki/contents/articles/31330.sharepoint-using-presaveaction-function-on-custom-list-forms.aspx

Answer 3

Wrap your validation code in a function, as well as your 'success message' code in a different function. Have the first function call the second function if all fields are valid.

OnClick, call the first function, which will validate the fields and display to the end user which fields are in error. If no fields are in error, the code will call the second function which will display your success message.

This will be the way to handle this situation if you have access to the validation code (usually javascript).