Question

I have two fields in a form

<div class="form">
  <label class="title">{'webmasterSubmitWebsite_rss_feed_title'|lang}</label>
  <div class="infos"><input type="text" class="input_text_large" name="rssTitle" value="" /> <img src="{"/templates/$templateName/images/icone_info.gif"|resurl}" alt="" class="aide" title="{'webmasterSubmitWebsite_rss_feed_title_tooltip'|lang}" /></div>
</div>

<div class="form">
   <label class="title">{'webmasterSubmitWebsite_rss_feed_url'|lang}</label>
   <div class="infos"><input type="text" class="input_text_large" name="rssFeedOfSite" value="" /> <img src="{"/templates/$templateName/images/icone_info.gif"|resurl}" alt="" class="aide" title="{'webmasterSubmitWebsite_rss_feed_url_tooltip'|lang}" /></div>
</div>

and I want a javascript or jquery or similar function to validate this two fields in this mode:

If rss title (first field) is not blank (is filled) then rss URL (second field) must be filled also with a valid URL else a error message appear and this message appear also if only the rss field URL is filled and not the rss title field
ie if a user fill first field then must compile second field and vice versa.

Any solution? Thanks.

Answer 1

Give the input tags an ID attribute instead of name and with jquery you can do this:

function checkInput(){
var f1 = $('#rssTitle').value;
var f2 = $('#rssFeedOfSite').value;

if(f1 == '' && f2 != '')
{
    alert('Please enter an rss Title');
    return false;
}
if(f1 != '' && f2 == '')
{
    alert('Please enter a url');
    return false;
}
//check for valid url
if(f2.substring(0,7) != 'http://')
{
    alert('Please enter a valid url');
    return false;
}
$('#form1').submit();
}

Also have your button call this function in its onclick event.

edit: if you want to keep name attribute instead of ID, select them using jquery like so:

var f1 = $('input[name="rssTitle"]').value;