7 Replies - 742 Views - Last Post: 21 November 2015 - 08:18 AM

#1 ansarmonma  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 19-November 15

how to make form submit validation?

Posted 19 November 2015 - 05:45 AM

Hi,

I have a script to validate form and it works but I need a help in submit button validation. I don't know how to add select validation before submitting the form (//Form area in below script). I am attaching the script here.

<script>
    function validateName(x){
      // Validation rule
      var re = /[A-Za-z -']$/;
      // Check input
      if(re.test(document.getElementById(x).value)){
        // Style green
        document.getElementById(x).style.borderColor ='#80c75a';
        // Hide error prompt
        document.getElementById(x + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(x).style.borderColor ='#e35152';
        // Show error prompt
        document.getElementById(x + 'Error').style.display = "block";
        return false; 
      }
    }
	// Validate email
    function validateEmail(email){ 
      var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(re.test(email)){
        document.getElementById('email').style.borderColor ='#80c75a';
        document.getElementById('emailError').style.display = "none";
        return true;
      }else{
        document.getElementById('email').style.borderColor ='#e35152';
        return false;
      }
    }
	// Phone Number
	function validatePhone(phone) {
    //var re=/^(\+91-|\+91|0)?\d{10}$/;//for pattern like +91-9198387083,9198387083,09198387083
    var re = /^\d{10}$/; //for exact 10 digits
    var re1 = /^(\d{4}\s)?\d{7}$/; // for phone if you don't need space remove \s
    if (re.test(phone)) {
        document.getElementById('phone').style.borderColor = '#80c75a';
        document.getElementById('phoneError').style.display = "none";
        return true;
    } else if (re1.test(phone)) {

        document.getElementById('phone').style.borderColor = '#80c75a';
    } else {

        document.getElementById('phone').style.borderColor = '#e35152';
        return false;
    }
}

$("#phone").on("blur", function () {
    validatePhone($(this).val());
});
	// Select Boxes

 function validateSelect(selectControl){ 
   if(selectControl.value > 0){
    selectControl.style.borderColor ='#80c75a';
	document.getElementById('selectError').style.display = "none";
    return true;
  }else{
    selectControl.style.borderColor ='#e35152';
    return false;
  }
}

// Form 
function validateForm(){
      // Set error catcher
      var error = 0;
	  
	  // Check name
      if(!validateName('name')){
        document.getElementById('nameError').style.display = "block";
        error++;
      }
      // Validate email
      if(!validateEmail(document.getElementById('email').value)){
        document.getElementById('emailError').style.display = "block";
        error++;
      }
	  
	  // Validate Phone
	  if(!validatePhone(document.getElementById('phone').value)){
        document.getElementById('phoneError').style.display = "block";
        error++;
      }
	  
	  // Validate Select
	  	
	  
	  
	// Don't submit form if there are errors
      if(error > 0){
        return false;
      }  
	}
	</script>



Is This A Good Question/Topic? 0
  • +

Replies To: how to make form submit validation?

#2 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,892
  • Joined: 12-December 12

Re: how to make form submit validation?

Posted 19 November 2015 - 05:56 AM

function validateSelect(selectControl){

To call your function you have to pass it a reference to your select element. If your select has an id then you can use getElementById:
if (validateSelect(getElementById('yourSelectID'))) {

This post has been edited by andrewsw: 19 November 2015 - 05:56 AM

Was This Post Helpful? 0
  • +
  • -

#3 ansarmonma  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 19-November 15

Re: how to make form submit validation?

Posted 19 November 2015 - 06:12 AM

@ andrewsw , I got the idea , Can help me to suggest a code to replace it.

This post has been edited by Dormilich: 23 November 2015 - 06:48 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,892
  • Joined: 12-December 12

Re: how to make form submit validation?

Posted 19 November 2015 - 06:13 AM

Quote

Can help me to suggest a code to replace it.

I don't know what you mean by this. I have already suggested, and demonstrated, what you need to do. It is up-to you to implement my suggestion.

This post has been edited by andrewsw: 19 November 2015 - 06:14 AM

Was This Post Helpful? 0
  • +
  • -

#5 ansarmonma  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 19-November 15

Re: how to make form submit validation?

Posted 19 November 2015 - 11:22 PM

I replaced the code (for validate select )but its not working from my side, pls check.
 function validateSelect(language){ 
   if(selectControl.value > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
	document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}


This post has been edited by Dormilich: 23 November 2015 - 06:49 AM

Was This Post Helpful? 0
  • +
  • -

#6 ansarmonma  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 19-November 15

Re: how to make form submit validation?

Posted 19 November 2015 - 11:34 PM

validate select is not working, I tried to get from ID to implement the same effect described in the below script. pls help.

 
function validateSelect(language){ 
   if(selectControl.value > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
	document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,892
  • Joined: 12-December 12

Re: how to make form submit validation?

Posted 20 November 2015 - 04:45 AM

That change is wrong. You've changed the parameter name to language but then you don't use it, but you've left in selectControl which is now undefined.

I'm curious why you made the change? Do you understand the code?
Was This Post Helpful? 0
  • +
  • -

#8 blankwavercade  Icon User is offline

  • D.I.C Head

Reputation: 31
  • View blog
  • Posts: 123
  • Joined: 13-December 11

Re: how to make form submit validation?

Posted 21 November 2015 - 08:18 AM

It looks like you have the code you need to implement this. Take a look at lines 78 or 84. You pass a selected element to your other functions. Why not do the same for the select validation? As Andrew said above me, your change to language is wrong. I don't mean to sound mean, but it doesn't look like you even tried to implement the logic to run this validation function considering the code is a few lines above.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1