Email Id Validation In SharePoint

Case 1

If the validation is not for the last field of the form to be filled out, follow the steps given below.

Set the onfocusout event for this button, as shown below.
1. <div>Email Id: <input type="number" id="emailid" onfocusout="emailcheck();"></div>

Create a function representing linked to that button and it gets executed when triggered.
1. function mobilecheck() {
2. var mobile = document.getElementById("phonenumber").value;
3. var pattern = /^[1-9]{1}[0-9]{9}$/;
4. //var eml = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
5. if (pattern.test(mobile)) {
6. //alert("Your mobile number : " + mobile);
7. return true;
8. }
9. alert("It is not a valid mobile number. Please input 10 digits only!");
10. return false;
11. }

Case 2

If the validation is the last field of the form to be filled (as displayed below), follow the steps given below to avoid multiple alert messages for the wrong Email entry.

Add the Email validation code given below for the adding function.
1. function addparty() {
2. var partyname = $("#partyname").val();
3. var address = $("#address").val();
4. var phonenumber = $("#phonenumber").val();
5. var contact = $("#contact").val();
6. var emailid = $("#emailid").val();
7. //var caseid = $("#caseid_lb").text();
8. var caseid = $("#txt_caseidhidden").val();
9. var caseidvalidation = $("#caseid_lb").text();
10. if (caseidvalidation == "" || caseidvalidation == null || caseidvalidation == "NA" || caseidvalidation == "N\A") {
11. alert("Please enter the basic details");
12. return false;
13. }
14. //if (caseid == "" || caseid == null || caseid == "NA" || caseid == "N\A") {
15. // alert("Please search and enter valid case id");
16. // return false;
17. //}
18. if (partyname == "" || partyname == "null") {
19. alert("Please enter the partyname ");
20. return false;
21. }
22. if (address == "" || address == "null") {
23. alert("Please enter the Address ");
24. return false;
25. }
26. if (emailid != "" || emailid != "null") {
27. var re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
28. var testEmail = re.test(emailid);
29. if (!testEmail) {
30. alert("Please enter a valid email!");
31. return false;
32. } else {
33. $().SPServices({
34. operation: "UpdateListItems",
35. async: false,
36. batchCmd: "New",
37. listName: "Party_Master",
38. valuepairs: [
39. ["Party_x0020_Name", partyname],
40. ["Address", address],
41. ["Mobile_x0020_No", phonenumber],
42. ["Contact_x0020_Person", contact],
43. ["Email_x0020_ID", emailid],
44. ["Case_x0020_Id", caseid]
45. ],
46. completefunc: function(xData, Status) {
47. alert("Created new party");
48. }
49. });
50. $("#partyname").val("");
51. $("#address").val("");
52. $("#phonenumber").val("");
53. $("#contact").val("");
54. $("#emailid").val("");
55. }
56. } else {
57. alert("Please enter email address!");
58. return false;
59. }
60. }

Call this function through onclick event, using the button for Adding.
1. <input class="popup_save" id="btn_addparty" type="button" value="Add Party" onclick="addparty();"/>

Go to the site page and start filling in the details.

Here the validation message for Email Id pops up, if entered wrong.

Here is the outcome when a correct email Id entry is made and added through Add Party button.