How To Validate Textarea And Radio Button In A Loop

I need one help. I have some multiple textarea, radio button and dropdown list which are created by clicking on a button. I need to validate them for textarea has blank value, radi

Solution 1:

From what I can understand from the question, I have deduced that you have a form with input controls. The user can press '+' to replicate/clone a div containing all input thus providing an additional form filled with input controls. If this is the case, you can use the following for validation to ensure that all currently visible input controls have been filled with data.

Pre-requisite: Ensure that all forms are assigned the same class name.

Example:

var visibleDivs = $(".DisplayableDiv:visible"); // .DisplayableDiv name of all class containing form controlsvar hasValue = true;
// loop over all visible divsfor(i = 0; i < visibleDivs.length; ++i)
{
    $(visibleDivs[i]).find('input')
    .each(function() { // iterates over all input fields foundif($.trim($(this).val()).length === 0) {
            hasValue = false; // if field found without valuebreak;
        }
    });
}

if(hasValue === false) {
    // handle validation logic here (prompt user to complete all input areas etc)
}

Solution 2:

There are a number of problems with your code, but in particular you have the wrong approach.

Note that after the page is rendered and the DOM displayed, PHP has finished and no more PHP can run. So how do you do more stuff in PHP? Two options:

(1) Forms, or (2) AJAX - it's pretty easy, see these simple examples

Ajax sends specified data to a backend PHP file. Note that you cannot post AJAX data to the same file that contains the AJAX javascript. You must use a second PHP file.

The backend PHP file receives the data, uses the incoming data (e.g. num of ques) to create new HTML in a $variable and then just echos that $variable back to the originating file, where it is received in the .done() function (aka the success function), as a variable (e.g. recvd). If you receive HTML code, then that code can be injected back into the DOM via methods like .append() or .html() etc.

Here is a rough approximation of how you might proceed.

$('#plus').click(function(){
  addQuestionField();
});
$('#minus').click(function(){
  deleteQuestionField();
});

functionaddQuestionField(){
  var numques = $("#ques").val();
  if(numques==null || numques==''){
    alert('Please add no of questions');
    returnfalse;
  }
  var myAj = $.ajax({
    type: 'post',
     url: 'ajax.php',
    data: 'numques=' + numques,
  });
  myAj.done(function(recvd){
    $('#container').append(recvd);
  });
}

<style>#d1 {width:24%; float:left; padding:10px;}
  #d2 {padding-bottom:10px;}
</style><divid="d1"style="">No of questions : 
  <inputid="ques"class="form-control"placeholder="no of question"type="text" /></div><divid="d2">
  Questions : 
  <inputtype="button"class="btn btn-success btn-sm"name="plus"id="plus"value="+"><inputtype="button"class="btn btn-danger btn-sm"name="minus"id="minus"value="-"></div>

---

Validating user-submitted data is a separate issue, but the basic idea is shown above when the $('#ques') value is validated -- if empty, we alert a message and return false to return control to the user.

Note that you can validate either client-side (jQuery) or server-side (PHP). The difference is that when you validate client-side, you can return control to the user without losing anything they typed. When you validate server-side, you must send back all the user-typed data and re-populate the controls manually (i.e. it's a lot more work)

Also note that if you validate client side, and you have ANY concern about hacking, then you must also re-validate server side because client-side validation can be easily hacked. But if it fails server-side validation you will know the user monkeyed with your validation and you can be less kind about re-populating their entries...

Here is a basic example of client-side field validation.