CODEWITHSUNDEEP
django
user8427236
user8427236

Reputation: 297

How to disable button when required field is empty

Hello i need your help i need to disable this button send when the required field are empty. I am a beginner using django and i don't know how to resolve it. Please i need your help .. i lost my time trying to find a solution.

Views.py:

def contact(request):

      form = FeedbackForm(request.POST or None)
      if form.is_valid(): 


        recaptcha_response = request.POST.get('g-recaptcha-response')
        url = 'https://www.google.com/recaptcha/api/siteverify'
        values = {
            'secret': settings.GOOGLE_RECAPTCHA_SECRET_KEY,
            'response': recaptcha_response
        }
        data = urllib.urlencode(values).encode()
        req =  urllib2.Request(url, data=data)
        response = urllib2.urlopen(req)
        result = json.loads(response.read().decode())
        ''' End reCAPTCHA validation '''

        if result['success']:
    form.save()
    message = u'You have feedback\nName: %s\nEmail: %s\nPhone: %s\nCountry: %s\nFeedback:\n%s' % (
        form.cleaned_data['name'], 
        form.cleaned_data['email'],
        form.cleaned_data['phone'],
        form.cleaned_data['country'],
        form.cleaned_data['feedback'])
    try:
        send_mail('NEW FEEDBACK', message, '', settings.DEFAULT_FROM_EMAIL) # to admin
        send_mail('THANK YOU for contacting us', 'We will be back to you promptly.', '', [form.cleaned_data['email'],]) # to user
        messages.info(request, 'SUCCESS! Your message has been sent!')
        form = FeedbackForm()
    except:
        messages.info(request, 'Sorry, can\'t send feedback right now.')
        else:
            messages.error(request, 'Invalid reCAPTCHA. Please try again.') 

return render(request, 'contact.html', {'active_page':'contact','form': form,})

Contact.html:

<html>
 <div class="col-md-6">
  <form role="form" class="form" method="post">
    {% csrf_token %}
    {% for field in form %}
        <label for="{{ field.label }}">{{ field.label_tag }}
        {% if field.field.required %}<span class="red">*</span>{% endif %}</label>{{ field.errors }}{{ field }}
    {% endfor %}
    <p><span class="redText">*</span> Indicates a required field</p>
            <script src='https://www.google.com/recaptcha/api.js'></script>
            <div class="g-recaptcha" data-sitekey=""></div>
    <input type="submit" value="Send" class="btn btn-lg">
</form>

Upvotes: 0

Views: 1811

Answers (1)

Clay Records
Clay Records

Reputation: 503

The best way to do this would be to use JavaScript and jQuery. In this example, when you click your button you can make sure the form is valid before it submits.

$(".validate").on("click", function () {
        if (!valid()) {
            alert("You are missing required fields.");
            return false;
        }
        else {
            return confirm("This will submit the form. Are you sure?");
        }
    });
    
    function valid() {
        return false;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="validate" value="Send" class="btn btn-lg">

This code adds a class to your button. The jQuery listens for the click, then makes a JavaScript function that would check if it is valid. If it is not, it displays an alert. If it is, it displays a confirm message. There are many other ways to do this with JS though.

Upvotes: 1

Related Questions