SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rewriting HTML tag attributes

    I'm developing forms and form-validation in a corporate CMS where I cannot touch the HTML template that my work will end up in. The untouchable template contains both the form tag and the submit button. My task is to create and style inputs in the middle. I know, weird.

    The template's form tag does not have any "onSubmit" attribute at all. Further, the submit button is type="button" NOT type="submit", and it has a handler like this: onClick="validateFields(formName)" (NOT "return validateFields(formName)").

    I AM allowed to rewrite the validateFields() function. The stock one does various routines and concatenates error messages in a variable. It does not use "return false" at any point. At the end, if errors exist, it displays the error messages variable with alert(). If no errors, it does a form.submit().

    The problem is that if the user has filled out 98% of the form correctly, but gets one validation error, the alert pops up, and when it's dismissed the form resets itself and all the user's work on the form is gone.

    If possible, I want to do two things:

    1) Insert an onSubmit attribute into the form tag (or dynamically rewrite the whole form tag if necessary) so that it ends up saying: onSubmit="return validateForm(theForm)".

    2) Replace their faux submit input (with the onClick handler) with a simple, genuine Submit button (type="submit").

    Finally, my own validateForm() function will use "alert(errorMessage); return false;" to stop submission without throwing away existing user input.

    Can I rewrite HTML tags the way I want to? (It's HTML btw, not XHTML.)

    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There are a number of ways to target the form element, depending on how it's defined on the page.

    Form with identifier

    Code html4strict:
    <form id="myForm" ...>

    Code javascript:
    var theForm = document.getElementById('myForm');

    Form with name

    Code html4strict:
    <form name="myForm" ...>

    Code javascript:
    var theForm;
    theForm = document.forms['myForm']; // or
    theForm = document.forms.myForm;

    Form with no identifier or name

    Code html4strict:
    <form ...>

    Code javascript:
    var theForm = document.forms[0] // or [1], or [2] depending on where it is

    Once you have the form you can perform your work on it.

    Code javascript:
    formName = "myForm";
    function validateFields(formName) {
    	return false;
    }
    var theForm = document.getElementById('myForm');
    theForm.onsubmit = validateFields;
    var els = theForm.getElementsByTagName('input'),
        elsLen = els.length,
        el,
        i,
        oldEl;
    for (i = 0; i < elsLen; i += 1) {
        el = els[i];
        if (el.type === 'button') {
            oldEl = el;
        }
    }
    oldEl.setAttribute('onclick', null);
    var newEl = document.createElement('input');
    newEl.type = 'submit';
    newEl.value = 'Submit';
    oldEl.parentNode.replaceChild(newEl, oldEl);

    Once you attach the validateFields() function in the above manner, you can use the this keyword from within the function to refer to the form.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great answer, Paul. Thanks so much. It all makes sense on first reading. As soon as I get something else off my desk I'll work with it and let you know.

    For some reason, the forum software didn't include your commented-out passage on structuring the validation function itself, but those lines did come through in my email notification about your post; they were also very helpful.

    Cheers.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by spacewalk View Post
    Great answer, Paul. Thanks so much. It all makes sense on first reading. As soon as I get something else off my desk I'll work with it and let you know.

    For some reason, the forum software didn't include your commented-out passage on structuring the validation function itself, but those lines did come through in my email notification about your post; they were also very helpful.
    That's great to know. When writing these replies it can be tricky to gauge how far to go on certain topics, so editing sometimes occurs if I feel that something may be going too far.

    The decision to pull the piece I had begun on the validation function was in part because I didn't want to overstep the mark, yet I'm glad that you've appreciated what was there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    That's great to know. When writing these replies it can be tricky to gauge how far to go on certain topics, so editing sometimes occurs if I feel that something may be going too far.

    The decision to pull the piece I had begun on the validation function was in part because I didn't want to overstep the mark, yet I'm glad that you've appreciated what was there.
    I definitely appreciated it. As long as we're on the subject... My typical oldskool way of validating a form is to declare a form tag like this:

    Code:
    <form action="whatever.php" method="post" onSubmit="return validateForm(this);">
    The form gets submitted with a normal submit button (type="submit").

    And the function has this structure:

    Code:
    function validateForm(form) {
    	if (form.first_name.value.length < 1) {
    		alert("Please complete the First Name field.");
    		form.first_name.focus();
    		return false;
    	} else if (form.last_name.value.length < 1) {
    		alert("Please complete the Last Name field.");
    		form.last_name.focus();
    		return false;
    	} else { 
    		return true; // form is OK to submit
    	}
    }
    The step-by-step input checks are childlike, but beyond that, is the basic approach OK? Thanks.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Your suspicions are right. There is a better way where you use javascript to attach the validation event itself.

    Code html4strict:
    <form id="myForm" action="whatever.php" method="post">

    Code javascript:
    document.getElementById('myForm').onsubmit = validateForm;

    When the validateForm() function is called, the this keyword will now automatically refer to the form element, so you don't need to explicitly pass it to the function.

    Code javascript:
    function validateForm() {
    	var form = this;
    	...
    }

    With the validation itself, you could improve it so that it's able to be more flexible. One of the better ways is to use class names on the form elements that specify it's required, or has to be a certain type of input. We can go in to that at some later stage.
    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
  •