Validating multiple text boxes with jquery

Question

If I have multiple textboxes which have different ID's but all id's start with 'pics' preceeded by a number. so:

textbox1  id = 'pics1' value='test1'
textbox2  id = 'pics2' value='test2'
textbox3  id = 'pics3' value='test1'
...
submit

I want to do some validation that when the user clicks submit..there are no two values in the textboxes that are same. For the above example, validation will result in error and form wont submit. because pics1 and pics3 have same values.

Answer 1

Selectors/attributeStartsWith

Answer 2

Try this:

<script>
function validate()
{
    var areas = document.getElementsByTag('textarea');
    for (var i=0; i<areas.count;i++)
        for (var j=i+1; j<areas.count;i++)
            if (areas[i].id.startsWith('pics') && areas[i].id.startsWith('pics') && areas[i].value == areas[j].value)
                return false;
    return true
}
</script>

<form onsubmit="return validate();">
    <textarea id = 'pics1'></textarea>
    <textarea id = 'pics2'></textarea>
    <textarea id = 'pics3'></textarea>
    <input type="submit" />
</form>

Answer 3

One solution (not tested):

function validate() {

   var isValid = true;

   $("input:text[id^=pics]").each(function() {
      if ($("input:text[id^=pics][value=" + $(this).val() + "]").length > 1)
        isValid = false;
      });

   return isValid;
}

Answer 4

This will work for however many text inputs that you have

function validate()  {
  var inputs = $('input:text[id^="pics"]');
  var values = $.map(inputs, function(n, i) {
      return n.value;
  });

  values = unique(values);

  return values.length === inputs.length;
}

function unique(arr) {
  var r = [];
  o:for(var i = 0, n = arr.length; i < n; i++) {
    for(var x = i + 1 ; x < n; x++) {
       if(arr[x]==arr[i]) continue o;
    }
    r[r.length] = arr[i];
  }
  return r;
}

Answer 5

<form onsubmit="return validate()" >
<input type="text" id="pics1" value="test1" />
<input type="text" id="pics2" value="test2" />
<input type="text" id="pics3" value="test3" />
<input type="submit" />
<br/><label id="error" />
</form>
<script>
function validate(){
    var inputs=document.getElementsByTagName("input");
    var pics1_temp,pics3_temp;
    for (var i=0;i<inputs.length;i++){
     if(inputs[i].id.indexOf("pics")>-1)
     {
      if(inputs[i].id=="pics1")
       pics1_temp=inputs[i].value;
      else if(inputs[i].id=="pics3")
       pics3_temp=inputs[i].value;
     }
    }

    if(pics1_temp!=pics3_temp)
    {
     document.getElementById("error").innerHTML="Pic1 must match with pic3";
     return false;
    }
    else return true;
}
</script>