Validate form data in jquery

Question

i want to validate this from uing jquery.

WHEN USER CLick on checkbox and empty textbox it alerts me please fill out answer1 and vice versa for other answers. And another validation user can't select more that two or three checkbox. Here is my Html code:-

<div class="portlet-body form">
    <form id="add-question-form" class="form-horizontal" method="POST" action="{{ url('admin/add-question/'.$course_id) }}" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
        <div class="form-body">
            <div class="form-group">
                <label class="col-md-3 control-label">Question</label>
                <div class="col-md-4">
                    <textarea type="text" placeholder="Enter Question" class="form-control" name="title"></textarea>
                </div>
            </div> 
            @for($i=1; $i <=6; $i++)
            <div class="form-group">
                <label class="col-md-3 control-label">Option {{ $i }}:</label>
                <div class="col-md-4">
                    <input type="text" placeholder="Enter Option {{ $i }} " class="form-control" name="options[{{$i }}]">
                </div>
                <div class="col-md-1" style="float:left;  vertical-align: middle;">
                    <input type="checkbox" id="{{ $i }}" class="form-control" name="is_correct[{{ $i }}]" value = "1">
                </div>
            </div>
            @endfor  
        </div>
        <div class="form-actions fluid">
            <div class="row">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn green" type="submit">Submit</button>
                    <button onclick="window.location.href='/admin/test_questions/{{$course_id}}'" class="btn default" type="button">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>

Can anyone provide me jquery code. Thanks in advance

You need to provide more details, like what framework you using and what have you tried, currently seems like you using blade engine (laravel). — Terabyte, Oct 20 '16 at 07:48

score 0 · Answer 1 · answered Oct 20 '16 at 07:49

0

You will have to add an onsubmit attribute to the form like this

<form onsubmit="return Validate()">

Then the Validate() method will return false if any of the validation fails and prevent the form from being submitted. Now to write Validate method, i suggest you go through the basic syntax of JQuery and believe me it would be very easy to do these validations.

answered Oct 20 '16 at 07:49

It's a trap

1,333
17
39

Trap can you please provide the jquery code for validation? – kunal Oct 20 '16 at 08:00
@kunal I won't. Why?I don't have time enough for that. Not At least now. Give the man a fish and feed him for a day. Teach him how to fish and feed him for lifetime. Believe me, it will be very easy and i will reply to all your comments if you face problem in writing it. But i want you to start by yourself. – It's a trap Oct 20 '16 at 09:24

Dani Vijay · Answer 2 · 2016-10-20T09:08:01.077

0

Add attribute onchange="validateMyForm({{ $i }})" to checkbox (<input type="checkbox" ... >) then add the following function to script.

function validateMyForm(j) {
     if ($("#options["+j+"]").val() == '') {
         alert('please fill out answer ' + j);
         $("#" + j).attr('checked', false); //clears checkbox
     }
 }

for jQuery v1.6+, you can use $("#"+j).prop('checked', true) instead.

edited Oct 20 '16 at 09:08

answered Oct 20 '16 at 08:01

Dani Vijay

2,188
2
22
37

1

Updated the code. Please make it clear what is the condition for preventing multiple checkbox selection. – Dani Vijay Oct 20 '16 at 09:10

Validate form data in jquery

2 Answers2