Jump to content

Nic727

Members
  • Content count

    242
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Nic727

  • Rank
    Member

Recent Profile Visitors

16,937 profile views
  1. Nic727

    How to set Logo height in Nav bar? (Resolved)

    Nevermind, saw that justify-content:space-between to nav-container and adding vertical-align:middle to my image fixe that. Not sure why vertical-align work here since my image is not in a table, but nice to see it works.
  2. Hi, I have a little problem. I finished my logo and want to add it to my website right before my name in the nav bar, but if I had the image, it break my navigation. I'm not really sure how I can fixe that. I tried some stuffs here and there, but wasn't really successful. I would like to set a height to my image, but I don't want my image to mess up with the general height of the navigation. <!-- NAVIGATION BAR --> <header class="navigation"> <div class="nav-container"> <a class="logo" href="nicolas-duclos.com"><img src="images/Logo-black.png"> NICOLAS DUCLOS</a> <!-- MOBILE MENU --> <a class="mobile-menu" href="#"><i class="fas fa-bars" aria-hidden="true"></i></a> <nav class="right-menu"> <a class="close-mobile-menu" href="#"><i class="fas fa-times"></i></a> <ul class="menu"> <li class="menu-item"><a href="index.html">ACCUEIL</a></li> <li class="menu-item"><a href="albums.html">ALBUMS</a></li> <li class="menu-item"><a href="blogue.html">BLOGUE</a></li> <li class="menu-item current"><a href="a-propos.html">À PROPOS</a></li> <li class="menu-item"><a href="#">CONTACT</a></li> </ul> </nav> </div> </header> My idea would be to use display flex to my nav-container and items-align:center, but it make my floating right "right-menu" going to the left next to my logo and name. My goal is to have logo+name on left and menu on the right. Do you have any idea how I can do that? Thank you
  3. Nic727

    Form validation help (regex and PHP)

    Thank you. It's now resolved, but just one thing. Is it normal that my regex is a weird color like that? Just want to make sure it will works, but other than that everything works fine now!
  4. Nic727

    Form validation help (regex and PHP)

    ok, because for now I have that : // Check that data was sent to the mailer. if (empty($prenom) || empty($nom) || empty($courriel) || empty($suj) || empty($message) || !filter_var($courriel, FILTER_VALIDATE_EMAIL)) { // Set a 400 (bad request) response code and exit. http_response_code(400); echo "Oops! There was a problem with your submission. Please complete the form and try again."; exit; } If I had the same if as in Javascript, but for the PHP validation, is it a http_response_code(400) or it's another code? Also, I guess I can't actually change my border colors via the php code right? Since I can't retrieve input and add css via the php file... Thank you
  5. Nic727

    Form validation help (regex and PHP)

    Ok thank you. I also found out how to make it works. Is it correct like that or I can make it shorter? $("#ajax-contact").submit(function(event) { event.preventDefault(); // Get the form. var form = $("#ajax-contact"); // Get the messages div. var formMessages = $("#form-messages"); var prenomMessage= $("#prenom-message"); var nomMessage= $("#nom-message"); var emailMessage= $("#email-message"); var sujetMessage= $("#sujet-message"); var messageMessage= $("#message-message"); // TODO // Serialize the form data. var formData = form.serialize(); // Get the inputs var $prenom = $("#prenom"); var $nom = $("#nom"); var $email = $("#courriel"); var $sujet = $("#sujet"); var $message = $("#message"); // Regex var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; // Testing Regex if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); prenomMessage.addClass('error'); prenomMessage.text("Votre prénom est requis ou est invalide"); }else{ $prenom.css({"border-color":""}); prenomMessage.removeClass('error'); } if(regex1.test($nom.val())==false){ $nom.css({"border-color":"red"}); nomMessage.addClass('error'); nomMessage.text("Votre nom est requis ou est invalide"); }else{ $nom.css({"border-color":""}); nomMessage.removeClass('error'); } if(!$.trim($email.val()).length){ $email.css({"border-color":"red"}); emailMessage.addClass('error'); emailMessage.text("Votre adresse email est requise ou est invalide"); }else{ $email.css({"border-color":""}); emailMessage.removeClass('error'); } if(!$.trim($sujet.val()).length){ $sujet.css({"border-color":"red"}); sujetMessage.addClass('error'); sujetMessage.text("Un sujet est requis"); }else{ $sujet.css({"border-color":""}); sujetMessage.removeClass('error'); } if(!$.trim($message.val()).length){ $message.css({"border-color":"red"}); messageMessage.addClass('error'); messageMessage.text("Un message est requis"); }else{ $message.css({"border-color":""}); messageMessage.removeClass('error'); } if(regex1.test($prenom.val())==true && regex1.test($nom.val())==true && $.trim($email.val()).length && $.trim($sujet.val()).length && $.trim($message.val()).length){ // Submit the form using AJAX. $.ajax({ type: 'POST', url: form.attr('action'), data: formData, success: function(response) { // Make sure that the formMessages div has the 'success' class. formMessages.removeClass('error'); formMessages.addClass('success'); // Set the message text. formMessages.text(response); // Clear the form. $('#prenom').val(''); $('#nom').val(''); $('#courriel').val(''); $('#sujet').val(''); $('#message').val(''); }, error: function(data) { // Make sure that the formMessages div has the 'error' class. formMessages.removeClass('success'); formMessages.addClass('error'); // Set the message text. if (data.responseText !== '') { formMessages.text(data.responseText); } else { formMessages.text('Oops! An error occured and your message could not be sent.'); } } }) } }) I added the if statement that verify if everything is true or have a length higher than 0 and included the ajax inside. Now need to add my website on the server and test some PHP codes. Now with PHP validation, just a little question, is it possible to change styling via PHP? For example, if someone remove JavaScript and I also want him to have border-color in red if false or show a message in my formMessages div? I guess the the message showing in my div is related to response and data.responseText here, but it still Javascript lol.
  6. Nic727

    Form validation help (regex and PHP)

    Thank you. Typing mistake is annoying because you can re-read the same thing multiple time without seeing the mistake hahaha. About the Required, I'm just thinking if it's not a bad move to remove the required attribute since it's a good HTML5 attribute. One way I could use that + JS is if I remove my submit function and make it a click function when clicking on the "submit" button. Like that it doesn't send any information to the browser yet and can add the submit() after my validation. Almost finished the Javascript part. Just a little issue that make the form submit. I know that I need something between my validation and my submit .ajax, but I don't know why or how. $("#ajax-contact").submit(function(event) { event.preventDefault(); // Get the form. var form = $("#ajax-contact"); // Get the messages div. var formMessages = $("#form-messages"); var prenomMessage= $("#prenom-message"); var nomMessage= $("#nom-message"); var emailMessage= $("#email-message"); var sujetMessage= $("#sujet-message"); var messageMessage= $("#message-message"); // TODO // Serialize the form data. var formData = form.serialize(); // Get the inputs var $prenom = $("#prenom"); var $nom = $("#nom"); var $email = $("#courriel"); var $sujet = $("#sujet"); var $message = $("#message"); // Regex var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; // Testing Regex if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); prenomMessage.addClass('error'); prenomMessage.text("Votre prénom est requis ou est invalide"); }else{ $prenom.css({"border-color":""}); prenomMessage.removeClass('error'); } if(regex1.test($nom.val())==false){ $nom.css({"border-color":"red"}); nomMessage.addClass('error'); nomMessage.text("Votre nom est requis ou est invalide"); }else{ $nom.css({"border-color":""}); nomMessage.removeClass('error'); } if(!$.trim($email.val()).length){ $email.css({"border-color":"red"}); emailMessage.addClass('error'); emailMessage.text("Votre adresse email est requise ou est invalide"); }else{ $email.css({"border-color":""}); emailMessage.removeClass('error'); } if(!$.trim($sujet.val()).length){ $sujet.css({"border-color":"red"}); sujetMessage.addClass('error'); sujetMessage.text("Un sujet est requis"); }else{ $sujet.css({"border-color":""}); sujetMessage.removeClass('error'); } if(!$.trim($message.val()).length){ $message.css({"border-color":"red"}); messageMessage.addClass('error'); messageMessage.text("Un message est requis"); }else{ $message.css({"border-color":""}); messageMessage.removeClass('error'); } // Submit the form using AJAX. //... } That's so long... But if I add the same kind of validation to my PHP (server side), will it not overwrite what I did in Javascript?
  7. Nic727

    Form validation help (regex and PHP)

    About the keydown, my idea was that if the entry is false, make the border red like I already have, but when typing a true value, change border to default, but not sure it's possible without a keydown function. I think I will just forget this idea if it's too complicated. About the trim I was following this https://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery It seems to work for them. They are using This, but can I replace This by my variable?
  8. Nic727

    Form validation help (regex and PHP)

    Ok thank you. Didn't know that. Also if($.trim($email.val()).length == 0){ $emaill.css({"border-color":"red"}); } Doesn't work. Maybe something wrong in the way I wrote it.
  9. Nic727

    Form validation help (regex and PHP)

    I kept the required attribute just in case some bots or someone remove javascript.
  10. Nic727

    Form validation help (regex and PHP)

    ok… now how should I write that? I'm trying to make verification and if everything is good, submit with ajax, but I don't know how I should write it. For the moment I tried with multiple if statement like. // Get the inputs var $prenom = $("#prenom"); var $nom = $("#nom"); var $email = $("#courriel"); var $sujet = $("#sujet"); var $message = $("#message"); // Regex var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; // Testing Regex if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); console.log("TEST"); return false; } else if(regex1.test($nom.val())==false){ $nom.css({"border-color":"red"}); return false; } else if($.trim($email.val()).length == 0){ $emaill.css({"border-color":"red"}); return false; } else if($.trim($sujet.val()).length == 0){ $sujet.css({"border-color":"red"}); return false; } else if($.trim($message.val()).length == 0){ $message.css({"border-color":"red"}); return false; }else{ // Default style for inputs $prenom.css({"border-color":""}); $nom.css({"border-color":""}); $email.css({"border-color":""}); $sujet.css({"border-color":""}); $message.css({"border-color":""}); // Submit the form using AJAX. $.ajax({ But I have two new problems. Since I now know that my code need to be perfect to prevent "Required" from stopping browser. 1. Now it check only one at a time. So if $prenom is not correct, it doesn't check $nom. How to make it check all? I think I could make it work with OR statement by adding || between each of my verification, but how do I change CSS only for the one who has an error? 2. Is it possible to verify email from the type="email" without using Regex? I tried with the trim, but it still add the default box shadow to my input box because the email is invalid. I would like to make that if the email is invalid, don't submit form (return false). Also, my border-color reset doesn't work if I change only one with an error, but not the other one. Is it possible to correct that? I put that into the else statement, but since it doesn't read it if some are not correct, it doesn't work. OR I could make another if where it change the border-color when typing a valid entry? But it's like #1, how to change only the border of the input I'm currently typing into?
  11. Nic727

    Form validation help (regex and PHP)

    Ok I found the problem. The problem are the "required" inside my input. In fact, when clicking on the submit button, it's blocked by the required input. If I fill them all correctly but the one I have the code, my alert will shows up. Now instead of having a regex for the subject, message (which can be whatever people want) and email (the browser already have the validation), is it possible with javascript to look if the entry is invalid (no text) to add my red border? Is this code correct for that? if ($.trim($(anotherinput).val()).length == 0){ From what I know the trim is removing all white space right?
  12. Nic727

    Form validation help (regex and PHP)

    ok thank you will look at that. I updated my post above with a regex problem, but I will sort it out later. EDIT: Yes it recognize the form as one object. Not sure why it doesn't submit. [object Object]: {0: Object, length: 1, prevObject: Object} 0: Object length: 1 prevObject: Object __proto__: Object
  13. Nic727

    Form validation help (regex and PHP)

    Look like it doesn't submit at all. But according to https://api.jquery.com/submit/ I have wrote it correctly no? EDIT: If I change for .click instead of .submit it works. Something is wrong with my submit button… But I have it correctly written, I don't understand. <button id="submit" class="submit btn btn-dark" name="submit" type="submit" value="envoyer"> Like that it can works, but I don't think it's the proper way to do that. $("#submit").click(function() { var $prenom = $("#prenom"); console.log($prenom.val()); var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); console.log('false'); return false; }else{ console.log('true'); console.log('Submit'); $("form").submit(); return true; } }) Also, my regex doesn't work. My goal for the regex is to not allow numbers and special characters (\d\W) allow just one (\-\s\') at a time for a max of 20 characters, but I think I messed up since it doesn't work correctly.
  14. Nic727

    Form validation help (regex and PHP)

    Even like that it doesn't work and no error. $("form").submit(function(event) { var $prenom = $("#prenom"); var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); return false; }else{ return true; } }) One thing is certain… My regex work outside of the submit function (but a little bit broken since I can't write 123 as a name, but can write Ba123 which is weird) and I tried to move my code around, but nothing work. I even tried with the variables outside the function. Also the fact that I don't have errors showing make it very hard. Here are my files if you want to look into it. That's the last page of my project and I will be working on it for a week contactform.zip
  15. Nic727

    Form validation help (regex and PHP)

    I know, but I don't get errors. That's weird. Maybe my function is wrong. I tried to remove everything and just keep the regex and I added an new alert for "else" and it didn't show up either. I think my function is not working at all... I tried: $(function() { // Get the form. var form = $('#ajax-contact'); // Get the messages div. var formMessages = $('#form-messages'); // TODO: The rest of the code will go here... // Set up an event listener for the contact form. $(form).submit(function(event) { // Stop the browser from submitting the form. event.preventDefault(); // TODO // Serialize the form data. var formData = $(form).serialize(); //REGEX var $prenom = $('#prenom'); var regex1 = /[^\d\W]{2,20}[\-\s\']{0,1}/i; if(regex1.test($prenom.val())==false){ $prenom.css({"border-color":"red"}); alert("ERROR!"); return false; }else{ alert("GOOD"); } }); }); EDIT: If I only had my if outside the function, I have an alert when loading the page and everything is alright since it load my regex when loading the page. Not sure what is wrong with the function.
×