SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: verification

  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    verification

    Hello

    Heres my javascript code that will verify email from email input field and check if the checkbox (I agree condition) was checked:

    Code:
    function validate(e) {
    	var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    	var element = document.getElementById(e);
    	if (!element.agree.checked) {
    		alert("You must agree..!");
    	}
        else if (element.email.value.search(emailRegEx) == -1) {
              alert("Please enter valid email");
        }	
    	else {
    		element.submit();
    	}
    }
    However, this will work fine when calling with a link "javascript:validate('inputForm');" but if I try to prevent users by submitting form with pressing enter I put it in form onSubmit parameter:

    <form .. onSubmit="javascript:validate('inputForm');"> which will check the forms and submit data (do return) no matter if it matched or no.

    How should I change the code?

    Many thanks in advance!

  2. #2
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am no javascript expert but I think you need to put some return false statements after the alerts to make sure the form is not submitted.

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onsubmit="return validate('inputForm')" and have it return true or false.. or add the event handler unobtrusively.
    Cross browser css bugs

    Dan Schulz you will be missed

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by l2u View Post
    I put it in form onSubmit parameter:

    <form .. onSubmit="javascript:validate('inputForm');"> which will check the forms and submit data (do return) no matter if it matched or no.

    How should I change the code?
    The javascript pseudo-protocol is a bad bad thing and is only to be used for favelets and bookmarklets.

    With the onsubmit attribute, the contents of the string are automatically defined as being script.

    The onsubmit event must return false to the form in order to prevent the form from being submitted.

    Code html4strict:
    <form ... onSubmit="return validate('inputForm');">

    Now we just need the validate function to return false when validation fails.
    Start by assuming that it's valid, and then let any one invalid situation set the isValid parameter to false.

    Code javascript:
    function validate(e) {
    	var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    	var element = document.getElementById(e);
    	var isValid = true;
    	if (!element.agree.checked) {
    		alert("You must agree..!");
    		isValid = false;
    	} else if (element.email.value.search(emailRegEx) == -1) {
    		alert("Please enter valid email");
    		isValid = false;
    	} else {
    		element.submit();
    	}
    	return isValid;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I call the function above with the normal a href link without returning true or false?
    It returns a new page if I do: <a href="javascript: validate('inputForm')"></a>

    So I should avoid using javascript: word in all cases?

    Thanks a lot for help!

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you using the 'search' string operation? Why not use regex.test() or string.match()?

    Also, never ever have JavaScript within an anchor's HREF. What exactly do you think will happen for the people with JavaScript disabled?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Why are you using the 'search' string operation? Why not use regex.test() or string.match()?

    Also, never ever have JavaScript within an anchor's HREF. What exactly do you think will happen for the people with JavaScript disabled?
    How can I do the same thing with regex.test() or string.match() ?

    What should I use instead of anchor's href? OnClick event?
    Should I avoid using javascript: word as somebody mentioned in previous post?


    Thanks a lot for help!

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An example of using '[regex].test()':

    Code JavaScript:
    if( emailRegEx.test(element.email.value.search) ) {...}

    Because it returns a Boolean it's much easier to work with...

    What should I use instead of anchor's href? OnClick event?
    Yes, you should use the onClick event. Try, when you can, to attach event handlers unobtrusively instead of inline. In other words: don't put JavaScript within HTML tags.

    THIS IS WRONG:

    Code html4strict:
    <div onclick="doBlah()"></div>

    THIS IS RIGHT:
    Code html4strict:
    <div id="semantic-name"></div>
     
    <script type="text/javascript">
    document.getElementById('semantic-name').onclick = doBlah;
    </script>

    Strictly speaking, it's probably best to keep all javaScript in a separate file too and if your using XHTML then you need to specify the contents of 'script' elements as CDATA.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for useful tips!

    How would you usally put a javascript event on a <a href=""></a> tag?

    Would you do <a id="submitformbtn" href="#"></a> and then getElementById('submitformbtn') ?
    Whats the proper way of doing that?

    Many thanks in advance!

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    If it's for the purpose of submitting a form then there's an even better way to achieve things.

    Code javascript:
    <body>
    <form id="myForm">
        <p><input type="text" name="someName"></p>
        <p><input type="submit" value="Submit"></p>
    </form>
    <script type="text/javascript" src="script.js"> </script>
    </body>

    The is attribute on the form allows scripts to easily interact with the form elements.

    When there is no JavaScript available, the form will submit itself where no validation has occurred. This is why it's important for the server-side script to be the number 1 concern for validation.

    When JavaScript is available, we can perform validation on the client-side too with JavaScript, using something like the following:

    Code javascript:
    var form = document.getElementById('myForm');
    form.onsubmit = validateForm;
     
    function validateForm() {
        var form = this;
        var isValid = true;
        if (form.elements.someName.value === '') {
            isValid = false;
        }
        if (...) {
            isValid = false;
        }
        return isValid;
    }

    Notice how the HTML and JavaScript are kept completely separate from each other. This allows a lot more freedom in how the HTML can be coded, and in where the scripts can be used.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But how can I preform submit form action with normal link button if JS is disabled or not?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    With a text link, you cannot perform a form submit when javascript is disabled.
    This is partly why text links for form actions is to be avoided.

    If you're wanting the text links for cosmetic purposes, you should start with a button, then use javascript to replace that button with a text link equivalent. That's the only viable solution that will have the least number of problems for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •