How to do validation on custom Form - Content Editor!

Question

I have added Custom Form in Content Editor and it does work adds new item to the list but I'm just not finding a way how to add validation to the form.

This is the HTML INPUT

<p><label>First Name* <input  name="firstname"    id="firstname"     type="text"                                      required></label></p>
<p><label>Last Name*  <input  name="lastname"     id="lastname"      type="text"                                      required></label></p>
<p><label>Phone*      <input  name="phone"        id="phone"         type="text"                                      required></label></p>
<p><label>Email*      <input  name="email"        id="email"         type="email"  placeholder="[email protected]" required></label></p>
<p><label>       <input name="checkbox" id="checkbox" type="checkbox">Use all entry</label></p>
<p><button  onClick="save(); return false;">Save</button></p>

This is JQUERY/JAVASCRIPT

<script type="text/javascript">

function save() {

                var siteUrl = 'https://sharepoint.com/';

                var fname = $('#firstname').val();
                var lname = $('#lastname').val();
                var phone = $('#phone').val();
                var email = $('#email').val();

                var clientContext = new SP.ClientContext(siteUrl);
                var oList = clientContext.get_web().get_lists().getByTitle('Information');
                var itemCreateInfo = new SP.ListItemCreationInformation();
                this.oListItem = oList.addItem(itemCreateInfo);

                oListItem.set_item('Title', firstname);
                oListItem.set_item('LastName', lastname) 
                oListItem.set_item('Phone', phone); 
                oListItem.set_item('Email', email);

                oListItem.update();
                clientContext.load(oListItem);
                clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

              }

          function onQuerySucceeded() 
               {
                  alert('The user was created successfully');
               }

 //This is clearing out the values of employee fields if the checkbox is not checked
                var checkEmp = $('#checkbox').val();
                if(checkEmp == false){
                    $('#firstname').val('');
                    $('#lastname').val('');
                    $('#phone').val('');
                    $('#email').val('');

                }
              function onQueryFailed(sender, args)
              {
             alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
          }


</script>

Answer 1

The simplest way to add validation is to validate the fields before inserting to the list. See sample below. You can repeat this for other fields.

function save() {

    var siteUrl = 'https://sharepoint.com/';

    var fname = $('#firstname').val();
    var lname = $('#lastname').val();
    var phone = $('#phone').val();
    var email = $('#email').val();

    if(fname.length == 0){
        alert("Please specify first name");
        return false;
    }
    //same for other fields

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Information');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    ....
}   

Answer 2

Found a solution how to make validation when adding new item to the list from custom form.

<script>

function AddCar() {
//Retrieve the txtCar and check if it has some text.
var txtCar = document.getElementById("txtCar");
if (txtCar.value == "") {
alert("Please enter car name!");
    return;

/******** If want to add REGEX ****************************************
 *
 *   var txtCar = document.getElementById("txtCar");
 *   if (!(/^[A-Z][a-zA-Z]+$/.test(txtCar.value))) {
 *   alert("Please enter car name!");
 *   return;  
 ********************************************************************** */ 

//Retrieve the clientContext
var clientContext = SP.ClientContext.get_current();
//Retrieve the current website
var webSite = clientContext.get_web();
//Retrieve the lists
var lists = webSite.get_lists();
//Get the Cars List
var carsList = lists.getByTitle("ShowCar");
//Create new IteamCreationInformation
var itemCreationInfo = new SP.ListItemCreationInformation();
//the addItem takes the itemCreationInformation object
//and returns the listItem
var listItem = carsList.addItem(itemCreationInfo);
//Set the title of the list Item
//to the value in the txtCar
listItem.set_item("Title", txtCar.value);

//Call Update the listItem
listItem.update();
//Finally execute the operation
//pass to it a 2 callBack methods OnSucceed and OnFailure
clientContext.executeQueryAsync(
Function.createDelegate(this,this.Succeeded),
Function.createDelegate(this,this.Failed));
}
//Finally add the 2 CallBack method
function Succeeded() {
alert("Succeeded");
}
function Failed(sender,args) {
alert("fail");
}


</script>

<p><label>Car* <input type="text" id="txtCar" ></label></p><br>

<p><label><input type="button" id="btnAddCar" onclick="AddCar();" value="Add Car" >Save</label></p>