Making forms in Hype (With Example / PHP template)

First of all I apologize, as I am working with google translate.

What I am trying to do is, that it can be validated that the fields are not empty, that it can compare and validate the email field, and finally that the check is selected.

There is a result field, which only helps me to verify that it is selected.

and since I'm testing it locally, I can't find a link with contact.php

Suscribe.zip (67.7 KB)

I think you'll need two basic things for this to work:

  1. You'll probably want to put an ID on the animating checkbox element ("Pasted") itself instead of its parent symbol element. This is because your checkBox() function gets called and puts the "checked" class on that instead. I called this "checkbox" for simplicity.

  2. You'll need verification code in the contactFormSendMail() to look for this. I'm putting this at the top:

    var isChecked = hypeDocument.getElementById('checkbox').classList.contains('checked');
    

    And then some code below to see if it is checked:

    if(isChecked == false) {
        return;
    }
    

    Like the other blocks, you'll probably want to make a message field and populate it if it isn't checked.

Here's what I put together:

Suscribe.hype.zip (71.0 KB)

Thank you very much, I would only be able to compare the email field, so you can validate if it is correct and if they are the same.

thanks for your help

You would want to add a clause like:

	if (email != email2) {
		hypeDocument.getElementById('email-status').innerHTML = "Email Does Not Match";
		hypeDocument.getElementById('email2-status').innerHTML = "Email Does Not Match";
		return;
		
	}

See:
Suscribe.hype.zip (71.1 KB)

now it does the verification, and returns the error but when correcting, it does not advance in the verification of the next field. it's as if the email and email2 fields were never the same

In the else clause, there's code that blanks out the status fields. Since for each check you want to start fresh, you could probably move that block to the top:

	hypeDocument.getElementById('name-status').innerHTML = "";
	hypeDocument.getElementById('email-status').innerHTML = "";
	hypeDocument.getElementById('email2-status').innerHTML = "";
	hypeDocument.getElementById('phone-status').innerHTML = "";
	hypeDocument.getElementById('results').innerHTML = "";

See:
Suscribe.hype.zip (71.5 KB)

2 Likes

great jonathan, I finally left where the code was, but checking step by step, the answer was there. I have only one strange behavior but nothing serious in the operation of the form. Thank you

1 Like

Where is the information sent from the form? Where are the submission settings in the form?

Information appears to be added to the vars at the top of the contactFormSendMail() function:

vars = "name=" + name + "&email=" + email + "&phone=" + phone;

And then is sent via this line:

req.send(vars);

I'm not sure what you mean by "settings?"

(In any case I didn't really check the submission parts, just the validation as was asked)

I have not finished programming my website yet. but in the example there is a connection to a contact.php file, I'll start with that stage soon anyway.