0

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="john_doe@example.com" 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>
0

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);
    ....
}   
  • #Ahmad Zia your idea is not working is just refreshing the page and not saving the data – na12063 Sep 26 '17 at 15:39
  • @Nehat, looks like there is a javascript error in the code. Can you inspect the page in Chrome with Preserve log checked and see for any javascript error? – Ahmad Zia Sep 26 '17 at 23:01
  • Thanks for your help #Ahamd Zia found similar solution like you mention above. Posted below. – na12063 Sep 27 '17 at 16:38
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.