Tworzenie stron www

[lindros]

Czytasz dane z formularza, wysyłasz na serwer, tam walidujesz.

 

1. Przechodzi walidację - wysyłasz maile, robisz co trzeba i odsyłasz do js zwrotkę, że poszło

2. Nie przechodzi walidacji - odsyłasz do js zwrotkę, które pola nie przechodzą walidacji

 

Ewentualnie jakieś API do maili jak wyżej wspomniano.

 

Czystym JSem możesz co najwyżej otworzyć klienta pocztowego AFAIK.

[Classy]

Zrób walidację w js, jeżeli dane prawidłowe to wysyłaj do skryptu php, tam też waliduj i wysyłaj maila.

[lindros]

Zrób walidację w js, jeżeli dane prawidłowe to wysyłaj do skryptu php, tam też waliduj i wysyłaj maila.

Nie rób podwójnej walidacji, to raczej należy traktować jako błąd w sztuce.

[Classy]

A co jeżeli użytkownik ma wyłączony js? Pomijam fakt że to javascript ma wysyłać request na serwer to walidacja po stronie serwera jest jak najbardziej wskazana.

 

Wysłane z mojego A0001 przy użyciu Tapatalka

[lindros]

A co jeżeli użytkownik ma wyłączony js? Pomijam fakt że to javascript ma wysyłać request na serwer to walidacja po stronie serwera jest jak najbardziej wskazana.

No przecież napisałem, żeby zrobić walidację po stronie serwera :|

[jmk]

Edit: Nie ważne, już zrobiłem ;)

 

A może potraficie obsługiwać animate.css?

[adamus]

Tutaj masz opisane jak używać animate.css

 

https://github.com/daneden/animate.css

[Kaczy]

Nie bardzo wiedziałem, gdzie to pytanie umieścić...

 

Znacie jakieś strony/serwisy (obojętnie czy free, czy za $), gdzie można znaleźć fajne szablony na stronę www?

[barrti]

https://wrapbootstrap.com/

[jmk]

Mam prosty formularz:

<form id="formularz" action="mailto" method="post" onsubmit="return sprawdz_formularz()">
<div>
Imię <input type="text" name="imie"><br>
Nazwisko: <input type="text" name="nazwisko"><br>
E-mail <input type="text" name="Email"><br>
Treść wiadomości: <input type="text" name="tresc" maxlength="250"><br>
<input type="submit" value="Wyślij">
</div>
</form>

I plik .js do walidacji:

function sprawdz_formularz()
{
    // zmienna przechowujaca komunikaty bledow
    var bledy = '';
    // przypisanie obiektu formularza do zmiennej
    var f = document.forms['formularz'];
    
    // sprawdzenie imienia
    if (f.imie.value == '')
        bledy += 'Musisz wpisać imię!\n';
    // sprawdzenie nazwiska
    if (f.nazwisko.value == '')
        bledy += 'Musisz wpisać nazwisko!\n';
    if (f.tresc.value == '')
        bledy += 'Musisz wpisać treść!\n';

    // sprawdzenie czy byly bledy
    if (bledy == '')
        return true;
    else
    {
        alert(bledy);
        return false;
    }
}

Jak widać skrypt nie odnosi się do pola e-mail, jak mogę w tym skrypcie dodać poprawność wpisania adresu e-mail?

 

 

Chciałbym też, aby pole podświetlane było na zielono, jeśli zostanie tam coś wpisane (każde).

[Karolek]

za stackoverflow:

function validateEmail(email){
var re = /\S+@\S+\.\S+/;
return re.test(email);
}

[jmk]

Nie chciałem dodatkowej, chcę w tej zawrzeć wszystko.

[FYM]

var regex = /\S+@\S+\.\S+/;

if (regex.test(f.Email.value)){

bledy += 'Hola, hola, jakis niepoprawny ten adres e-mail!\n';

}

 

[jmk]

Możesz mi to wkleić w cały kod? Bo mi nie działa...

[FYM]

Jak to wkleić w cały kod? Wklej to sprawdzeniu treści. Jak nie działa, to jest z czymś tak problem.

[jmk]

Po wpisaniu:

function sprawdz_formularz()
{
    // zmienna przechowujaca komunikaty bledow
    var bledy = '';
    // przypisanie obiektu formularza do zmiennej
    var f = document.forms['formularz'];
    
    // sprawdzenie imienia
    if (f.imie.value == '')
        bledy += 'Musisz wpisać imię!\n';
    // sprawdzenie nazwiska
    if (f.nazwisko.value == '')
        bledy += 'Musisz wpisać nazwisko!\n';
    if (f.tresc.value == '')
        bledy += 'Musisz wpisać treść!\n';
    
    
    var regex = /\S+@\S+\.\S+/;
    if (regex.test(f.Email.value))
    bledy += 'Hola, hola, jakis niepoprawny ten adres e-mail!\n';
    
    
    // sprawdzenie czy byly bledy
    if (bledy == '')
        return true;
    else
    {
        alert(bledy);
        return false;
    }
}

Skrypt niby działa, ale maila olewa. Wyświetlają tylko błędy przy niewpisaniu imienia, nazwiska czy treści.

 

Natomiast jak wkleję tak jak FYM napisał czyli z {} w bledy, to w ogóle wywala i nic nie działa.

[Seju]

Bo powinno byc tam przeczenie.

var regex = /\S+@\S+\.\S+/;
if (!regex.test(f.Email.value)){
bledy += 'Hola, hola, jakis niepoprawny ten adres e-mail!\n';
}

Caly kod ponizej. Nie chce mi sie tego sprawzdac, ale powinno dzialac.

function sprawdz_formularz()
{
    // zmienna przechowujaca komunikaty bledow
    var bledy = '';
    // przypisanie obiektu formularza do zmiennej
    var f = document.forms['formularz'];
    
    // sprawdzenie imienia
    if (f.imie.value == '')
        bledy += 'Musisz wpisać imię!\n';
    // sprawdzenie nazwiska
    if (f.nazwisko.value == '')
        bledy += 'Musisz wpisać nazwisko!\n';
    if (f.tresc.value == '')
        bledy += 'Musisz wpisać treść!\n';
    
    
    var regex = /\S+@\S+\.\S+/;
    if (!regex.test(f.Email.value)){
    bledy += 'Hola, hola, jakis niepoprawny ten adres e-mail!\n';
    }
    
    
    // sprawdzenie czy byly bledy
    if (bledy == '')
        return true;
    else
    {
        alert(bledy);
        return false;
    }
}

[FYM]

Brawo ja :doh!: Za dużo własnego kodu w pracy i człowiek już takich bubli nie dostrzega

[jmk]

Co tu może nie działać... mam controller.js:

var appControllers= angular.module('appControllers',[]);
appControllers.controller('GalleryListCtrl', ['$scope', '$http',  function ($scope, $http) {
      $http.get('js/galleries.json').success(function(data){
          $scope.galleries=data;
      });
      $http.get('js/list.json').success(function(data){
          $scope.sortList=data;
      });
      
         $scope.orderProp = 'when';
}]);

appControllers.controller('GalleryDetailCtrl', ['$scope', '$http', '$routeParams',
       function($scope, $http, $routeParams) {
       $scope.galleryId = $routeParams.galleryId;
       
       $http.get('js/'+$routeParams.galleryId+'.json').success(function(data){
          $scope.gallery=data;
      });
        
      
}]);

I JSON:

 

galleries.json

 [
            {
             "id": "1",
             "title":  "1",
             "when": "2010",
             "thumbnailUrl": "img/opr1.jpg",
             "description": "asd"
            },  {
            "id": "2",
             "title":  "2",
             "when": "2011" ,
             "thumbnailUrl": "img/opr2.jpg",
             "description": "qwe"
            },  {
            "id": "3",
             "title": "3",
             "when": "2012" ,
             "thumbnailUrl": "img/opr3.jpg",
             "description": "hfghfhg"
            },  {
            "id": "4",
             "title": "4",
             "when": "2013" ,
             "thumbnailUrl": "img/opr4.jpg",
             "description": "bbbb"
            },  {
            "id": "5",
             "title": "5",
             "when": "2014" ,
             "thumbnailUrl": "img/opr5.jpg",
             "description": "vvvv"            
            },  {
            "id": "6",
             "title":  "6",
             "when": "2015" ,
             "thumbnailUrl": "img/opr6.jpg",
             "description": "Kctc"
            }            
           
          
      ]
      
     

I list.json:

[
             {
                "label":"Alfabetycznie",
                "value":"title"
             },
            {
               "label":"Chronologicznie",
               "value":"when"
            }
   ]

Kod na stronie:

<input ng-model="query">
<p> Wyniki wyszukiwania dla: {{query}} </p>
<br><br><br><br><br>

<label>Sortuj:</label>
<select ng-model="orderProp" ng-options="sort as sort.label for sort in sortList">

</select>

<p ng-if="orderProp.value">Galerie ułożone: {{orderProp.label}}</p>


<div class="row">
<div class="col-sm-4" ng-repeat="gallery in galleries | filter: query | orderBy: orderProp.value">
<img src="{{gallery.thumbnailUrl}}">
<h3>{{gallery.title}}</h3>
<p><strong>Kiedy:</strong> {{gallery.when}}
</p>
</div>

</section>





 
   <script src="js/jquery-1.12.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
      <script src="js/controller.js"></script>
      <script src="js/galleries.json"></script>
            <script src="js/list.json"></script>

A nie działa... kiedy miałem wszystko w controller - działało, ale po wyrzuceniu do jsonów nie trybi, mam takie coś:

 

http://i.imgur.com/dxapiNq.png

 

 

 

[Karolek]

nie dziala bo nie mozna embedowac .jsona przez script src tag :P